无缝连续滚动

Posted 2020-10-13 amandaj

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了无缝连续滚动相关的知识，希望对你有一定的参考价值。

1.简单的无缝连续滚动

原来：页面上是6个图片，编号0、1、2、3、4、5，复制一倍在后面，长长的火车在来回移动。

<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style:none;
        }
        .rolling{
            width:800px;
            height:130px;
            border:10px solid #000;
            margin:50px auto;
            position:relative;
            overflow:hidden;

        }
        .rolling .m_unit{
            width:5000px;
            position:absolute;
            top:0;
            left:0;
        }
        .rolling ul li{
            float:left;
            margin-right:10px;
        }
    </style>
</head>
<body>
   <div class="rolling" id="rolling">
       <div class="m_unit" id="m_unit">
           <ul>
               <li><a href="###"><img  src="images/shuzi/0.png" /></a></li>
               <li><a href="###"><img  src="images/shuzi/1.png" /></a></li>
               <li><a href="###"><img  src="images/shuzi/2.png" /></a></li>
               <li><a href="###"><img  src="images/shuzi/3.png" /></a></li>
               <li><a href="###"><img  src="images/shuzi/4.png" /></a></li>
               <li><a href="###"><img  src="images/shuzi/5.png" /></a></li>
           </ul>
       </div>
   </div>

</body>
</html>
<script type="text/javascript">
     var rolling=document.getElementById(\'rolling\');
     var m_unit=document.getElementById(\'m_unit\');
     var listul=m_unit.getElementsByTagName(\'ul\')[0]; //获取ui
     var listlength=m_unit.getElementsByTagName(\'li\').length; //获取li的长度
     listul.innerHTML+=listul.innerHTML; // 复制一倍的li标签
     var timer; //存定时器
     var nowleft=0;
     var zhefandian = -210*listlength;
     //鼠标移入大盒子的时候停止定时器
     rolling.onmouseenter=function(){
      clearInterval(timer);
     }
     rolling.onmouseleave=function(){
      move();
     }

    function move(){
        timer=setInterval(function (){
            nowleft-=3;
            if(nowleft<zhefandian){
                nowleft=0;
            }
            m_unit.style.left=nowleft+\'px\';
        },10)
    }
    move();





</script>

2.高级无缝滚动

①HTML结构中重复的代码，用js动态的添加。

②折返点：不要自己计算，要通过页面加载效果自动获取宽度，折返点的宽度应该等于ul内部所有里元素宽度的一半。方法：li不要添加宽度，浮动的元素被img自动撑宽，ul也不要加宽度，绝对定位的元素用内部的li元素撑宽。

解决方法有两种：

方法1：遍历前半部分（复制一倍之前）所有li，进行宽度累加，累加之后就是折返点。

上午学offsetWidth，但是这个方法不带margin。所以累加的时候，要得到计算后的margin麻烦，所以不考虑方法1。

方法2：折返点就是假火车第一张图的offsetLeft值，所以，如果原理的li个数是liLength，那么假火车的第一张图就是listLength[length]。

<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
    <style type="text/css">
           *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .rolling{
            width: 800px;
            height: 130px;
            border: 10px solid #ccc;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        .rolling .m_unit{
            /*这是运动的单位*/
            /*这个宽度足以致命，为了让所有的li能够并排*/
            /*这个宽度随便取，大一点*/
            width: 5000px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .rolling ul li{
            float: left;
            margin-right: 10px;
        }
    </style>
</head>
<body>
        <div class="rolling" id="rolling">
        <div class="m_unit" id="m_unit">
            <ul>
                <li><a href=""><img src="images/shuzi/0.png" /></a></li>
                <li><a href=""><img src="images/shuzi/1.png" /></a></li>
                <li><a href=""><img src="images/shuzi/2.png" /></a></li>
                <li><a href=""><img src="images/shuzi/3.png" /></a></li>
                <li><a href=""><img src="images/shuzi/pangzi.png" /></a></li>
                <li><a href=""><img src="images/shuzi/4.png" /></a></li>
                <li><a href=""><img src="images/shuzi/5.png" /></a></li>
            </ul>
        </div>
    </div>

</body>
</html>
<script type="text/javascript">
     var rolling =document.getElementById(\'rolling\');
     var m_unit =document.getElementById(\'m_unit\');
     var ullist=m_unit.getElementsByTagName(\'ul\')[0] ; //获取ul
     var lis=m_unit.getElementsByTagName(\'li\'); //获取所有li
     var imgs=m_unit.getElementsByTagName(\'img\'); //获取所有img
   ullist.innerHTML+=ullist.innerHTML; //复制一份ul
   var lislength=lis.length; // 获取所以li的长度，包括新的
   var timer; //存定时器
   var nowleft=0; //定义全局信号量，接收left的运动值。
   var zhefandian;
   //要计算折返点，但每个li宽度不一样，所以假火车开头元素的offsetLef  t就是折返点，这个元素是lis/2
     //但是由于Chrome的机理，如果要读取offsetLeft值必须保证所有图片加载完毕
   var count=0; //图片计数器
   for(var i=0; i<imgs.length; i++){
    imgs[i].onload=function(){
        count++;
        if(count == imgs.length){
            zhefandian=lis[lislength/2].offsetLeft;
        }
    }
   }

   rolling.onmouseenter=function(){
      clearInterval(timer);
   }

  rolling.onmouseleave=function(){
       move();
   }


   function move(){
    timer=setInterval(function(){
        nowleft-=3;
        if(nowleft < -zhefandian){
            nowleft=0;
        }
         m_unit.style.left= nowleft+\'px\';
    },10)
   }
   move();

</script>

以上是关于无缝连续滚动的主要内容，如果未能解决你的问题，请参考以下文章

JS学习无缝滚动

求javascript大神帮忙，怎么实现一个DIV连续滚动滚动的过程中定时停止?

无缝轮播图的一种方式原理

谁能提供一个图片无缝滚动的代码，我是往淘宝店上放的，请提供一个详细的代码，解释的详细还可加分

无缝向上滚动原理代码

无缝滚动js代码