.net中实现图片的横向(竖直)滚动（轮播）

最新推荐文章于 2022-08-20 17:15:27 发布

彦雷

最新推荐文章于 2022-08-20 17:15:27 发布

阅读量763

点赞数 1

分类专栏： .NET 文章标签： .net XHTML HTML C C++

.NET 专栏收录该内容

65 篇文章 0 订阅

订阅专栏

[color=blue]图片横向滚动（轮播）[/color]

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>图片横向轮播</title>
    <script src="jquery.js" type="text/javascript"></script>
    <style type="text/css">
        #demo {
            background: #FFF;
            overflow:auto;
            border: 1px dashed #CCC;
            width: 650px;     
       }
        #demo img{
            width:120px;
            height:120px;
            border: 3px solid #F2F2F2;
       }
      #indemo {
            float: left;
            width: 500%;
       }
       #demo1 {
            float: left;
       }
       #demo2 {
            float: left;
        }
    </style>
    <script type="text/javascript" >
        $(function(){
	            var speed=10; //数字越大速度越慢
	            var tab=document.getElementById("demo");
	            var tab1=document.getElementById("demo1");
	            var tab2=document.getElementById("demo2");
	            tab2.innerHTML=tab1.innerHTML;
	            function Marquee(){
	                if(tab2.offsetWidth-tab.scrollLeft<=0)
	                tab.scrollLeft-=tab1.offsetWidth
	                else{
	                tab.scrollLeft++;
	                }
	            }
	            var MyMar=setInterval(Marquee,speed);
	            tab.onmouseover=function() {clearInterval(MyMar)};
	            tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
	        });
    </script>
</head>

<body>
<form id="form1" runat="server">
    <div id="demo">
        <div id="indemo">
            <div id="demo1">
            <a href="1.jpg" target="_blank"><img src="1.jpg" alt=""/></a>
            <a href="2.jpg" target="_blank"><img src="2.jpg" alt=""/></a>
            <a href="3.jpg" target="_blank"><img src="3.jpg" alt=""/></a>
            <a href="4.jpg" target="_blank"><img src="4.jpg" alt=""/></a>
            <a href="5.jpg" target="_blank"><img src="5.jpg" alt=""/></a>
            </div>
            <div id="demo2"></div>
        </div>
    </div>
</form>
</body>
</html>

[color=blue]图片的竖直滚动（轮播）[/color]

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>图片竖直轮播</title>
    <script src="jquery.js" type="text/javascript"></script>
    <style type="text/css">
        #demo {
            background: #FFF;
            overflow:auto;
            border: 1px dashed #CCC;
            width: 150px;
            height:500px;     
       }
       #demo a{
            display:block;
       }
        #demo img{
            width:120px;
            height:120px;
            border: 3px solid #F2F2F2;
       }

    </style>
    <script type="text/javascript" >
        $(function(){
	            var speed=10; //数字越大速度越慢
	            var tab=document.getElementById("demo");
	            var tab1=document.getElementById("demo1");
	            var tab2=document.getElementById("demo2");
	            tab2.innerHTML=tab1.innerHTML;
	            function Marquee(){
	                if(tab2.offsetHeight-tab.scrollTop<=0)
	                tab.scrollTop-=tab1.offsetHeight
	                else{
	                tab.scrollTop++;
	                }
	            }
	            var MyMar=setInterval(Marquee,speed);
	            tab.onmouseover=function() {clearInterval(MyMar)};
	            tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
	        });
    </script>
</head>

<body>
<form id="form1" runat="server">
    <div id="demo">
            <div id="demo1">
            <a href="1.jpg" target="_blank"><img src="1.jpg" alt=""/></a>
            <a href="2.jpg" target="_blank"><img src="2.jpg" alt=""/></a>
            <a href="3.jpg" target="_blank"><img src="3.jpg" alt=""/></a>
            <a href="4.jpg" target="_blank"><img src="4.jpg" alt=""/></a>
            <a href="5.jpg" target="_blank"><img src="5.jpg" alt=""/></a>
            </div>
            <div id="demo2"></div>
    </div>
</form>
</body>
</html>

彦雷

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
.net中实现图片的横向(竖直)滚动（轮播）

[color=blue]图片横向滚动（轮播）[/color][code="html"] 图片横向轮播 #demo { background: #FFF; overflow:auto; border: 1px dashed #CCC; ...
复制链接

扫一扫

专栏目录