无缝滚动scrollLeft

最新推荐文章于 2023-03-24 17:04:49 发布

flowcy

最新推荐文章于 2023-03-24 17:04:49 发布

阅读量462

点赞数

分类专栏： js 文章标签： js 无缝滚动

本文链接：https://blog.csdn.net/u010235230/article/details/49907409

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       *{margin:0;
           padding: 0;}

       #outer{
           width: 996px;
           height: 400px;
           /*overflow: scroll;*/
           overflow: hidden;
           margin:0 auto;

       }
       #inner{
           width: 1992px;
           height: 400px;
           background: yellow;
       }
       img{
           width: 249px;
           height: 400px;
       }
       li{
           list-style-type: none;
           float: left;
       }
   </style>

</head>
<body>
   
   <div id = "outer">
       <div id = "inner">
           <ul>
               <li><img src="img/3.jpg" alt=""></li>
               <li><img src="img/1.jpg" alt=""></li>
               <li><img src="img/5.jpg" alt=""></li>
               <li><img src="img/4.jpg" alt=""></li>
               <li><img src="img/3.jpg" alt=""></li>
               <li><img src="img/1.jpg" alt=""></li>
               <li><img src="img/5.jpg" alt=""></li>
               <li><img src="img/4.jpg" alt=""></li>
           </ul>
       </div>
   </div>
   <script>
       outer = document.getElementById('outer');
       inner = document.getElementById('inner');
       oli = document.getElementsByTagName('li');
       var outerWidth = outer.offsetWidth;
       var time = null;
       var x = 0;   //用来改变scrollLeft值的变量x
       var time2 = null;
       var olilength = oli.length/2; //li个数的一半，也就是不重复的图片个数
       function getSCL(){
           x++;
           outer.scrollLeft = x;
           for(i=1;i<=olilength;i++)
           {
               if(x==(outerWidth/olilength)*i) //横滚动轮scrollLeft =x ;x=一张图片宽时暂停，2张图片宽时暂停，3张，4张时也暂停……
               {
               clearInterval(time); //暂停
               time2 = setTimeout(function(){
                   time = setInterval(getSCL,1); //隔两秒（暂停2S后启动计时器）让之以原速继续前进
               },2000);
               }
           }
           if(x>=outerWidth)    //**实现无缝滚动，当滚动到第一组图的最后一张时，将横滚轮变成0，从第一组图开始重新滚动；
           {
               x = 0;
           }
       }
       time = setInterval(getSCL,1);

       inner.onmouseover = function(){
           clearInterval(time);//鼠标移入，清除计时器
           clearInterval(time2);
       }
       inner.onmouseout = function(){
           clearInterval(time);//鼠标移出先清除计时器，避免重复进出造成重复调用计时器产生的加速现象；
           clearInterval(time2);
           time=setInterval(getSCL,1);//鼠标移出，继续滚动；
       }
   </script>
</body>
</html>

flowcy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
无缝滚动scrollLeft

Document *{margin:0; padding: 0;} #outer{ width: 996px; height: 400px; /*overflow: scroll;*/ overflow: hidden
复制链接

扫一扫