使⽤JS实现图⽚轮播滚动跑马灯效果
  我的第⼀篇⽂章、哈哈、有点⼩鸡冻。
之前在百度搜索“图⽚轮播”、“图⽚滚动”，结果都是那种可以左右切换的。也是我们最常见的那种。可能是搜索 关键字的问题吧。如图：
教程效果图：
教程开始：
HTML代码：
1<body>
2<div id="div1">
3<div id="div4">
4<div id="div2">
5<img src="img/1.jpg" alt="图⽚1"/>
6<img src="img/2.jpg" alt="图⽚2"/>
7<img src="img/3.jpg" alt="图⽚3"/>
8<img src="img/4.jpg" alt="图⽚4"/>
9</div>
10<div id="div3"></div><!--这个容器是⽤来防⽌图⽚滚动时会出现空⽩的区域--> 11</div>
12</div>
13</body>
CSS代码：
1<style type="text/css">
2        div,img{
3            margin:0;
4            padding:0;
5        }
6        img{
7            float:left;
8            height:100px;
9            width:150px;
10        }
11        #div1{
12            width:500px;
13            height:100px;
14            overflow: hidden;
15            border:solid blue 2px;
16        }
17        #div2,#div3{
18            float:left;
19        }
23        #div4{
24            width:500%;/*这个属性很重要让容器有⾜够的宽度实现滚动*/
25            float:left;
26        }
27    </style>
JavaScript代码：
1 <script type="text/javascript">html滚动效果代码
2    window.οnlοad=function(){
3var ElementById('div1');
4var ElementById('div2');
5var ElementById('div3');
6
7          v3.innerHTML= v2.innerHTML;//将v2容器⾥⾯的图⽚插⼊到v3容器⾥⾯使其空⽩区域被遮住。 8function fun(){
9if(v1.scrollLeft<=0){
10                v1.scrollLeft=600;
11            }else{
12                v1.scrollLeft--;
13            }
14        }
15
16var fun1=setInterval(fun,10);
17
18        v1.onmouseover = function() {//⿏标经过时清除定时器停⽌图⽚的滚动
19                clearInterval(fun1)
20            };
21        v1.onmouseout = function() {//⿏标离开后继续滚动图⽚
22                fun1 = setInterval(fun, 10)
23            };
24    }
25
26 </script>
教程结束。
本⼈新⼿⼀个、请⼤神们多多指教。
此处省略⼀万字...

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。