首页技术正文

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

攻城狮天瑞技术 2022年11月7日

0 收藏 498 点赞 555 浏览 1105 个字

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

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

如图：

教程效果图：

教程开始：

HTML代码：

 <body>
     <div id="div1">
         <div id="div4">
             <div id="div2">
                 <img src="img/1.jpg" alt="图片1"/>
                 <img src="img/2.jpg" alt="图片2"/>
                 <img src="img/3.jpg" alt="图片3"/>
                 <img src="img/4.jpg" alt="图片4"/>
             </div>
             <div id="div3"></div><!--这个容器是用来防止图片滚动时会出现空白的区域-->
         </div>
     </div>
 </body>

CSS代码：

 <style type="text/css">
         div,img{
             margin:;
             padding:;
         }
         img{
             float:left;
             height:100px;
             width:150px;
         }
         #div1{
             width:500px;
             height:100px;
             overflow: hidden;
             border:solid blue 2px;
         }
         #div2,#div3{
             float:left;
         }
         #div4{
             width:500%;/*这个属性很重要 让容器有足够的宽度实现滚动*/
             float:left;
         }
     </style>

JavaScript代码：

 <script type="text/javascript">
     window.onload=function(){
           var v1=document.getElementById('div1');
           var v2=document.getElementById('div2');
           var v3=document.getElementById('div3');           v3.innerHTML= v2.innerHTML;//将v2容器里面的图片插入到v3容器里面  使其空白区域被遮住。
           function fun(){
             if(v1.scrollLeft<=0){
                 v1.scrollLeft=600;
             }else{
                 v1.scrollLeft--;
             }
         }         var fun1=setInterval(fun,10);         v1.onmouseover = function() {//鼠标经过时  清除定时器  停止图片的滚动
                 clearInterval(fun1)
             };
         v1.onmouseout = function() {//鼠标离开后  继续滚动图片
                 fun1 = setInterval(fun, 10)
             };
     } </script>