当前位置：首页 > news >正文

使用JS实现图片轮播滚动跑马灯效果

news 来源：原创 2024/5/3 5:07:23

　　我的第一篇文章、哈哈、有点小鸡冻。

之前在百度搜索“图片轮播”、“图片滚动”，结果都是那种可以左右切换的。也是我们最常见的那种。可能是搜索关键字的问题吧。

如图：

教程效果图：

教程开始：

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">
 2     window.οnlοad=function(){
 3           var v1=document.getElementById('div1');
 4           var v2=document.getElementById('div2');
 5           var v3=document.getElementById('div3');
 6  
 7           v3.innerHTML= v2.innerHTML;//将v2容器里面的图片插入到v3容器里面  使其空白区域被遮住。
 8           function fun(){
 9             if(v1.scrollLeft<=0){
10                 v1.scrollLeft=600;
11             }else{
12                 v1.scrollLeft--;
13             }
14         }
15 
16         var 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>