2018/2/6 无缝滚动与缓动动画

1.无缝滚动

原理：

首先先复制  两张图片 （第一张和第二张） 放到最后面  （本质上是第 5.6张）

 

ul 是盒子移动的，   如果ul 的left 值 大于等于  4张图片的宽度，就应该快速复原为0 。

完整代码：

<script>
      var scroll = document.getElementById("scroll");
      var ul = scroll.children[0];
      var num = 0; //控制左侧值  left
      var timer = null;  // 定时器
      timer = setInterval(autoPlay,20);
      function autoPlay() {
              num--;
              //console.log(num);
               num<=-1200 ? num = 0 : num;
               ul.style.left = num + "px";
           }
      scroll.onmouseover = function() {  // 鼠标经过大盒子  停止定时器
              clearInterval(timer);
          }
      scroll.onmouseout = function() {
              timer = setInterval(autoPlay,20);  // 开启定时器
          }
 </script>

2.缓动动画

    匀速动画，看起来，效果太简单。

    等差序列   :    2 4  6  8  10

    缓动动画公式:

    一个盒子初始值  是 0      要走到 400 px 的位置

    假如说，初始值   leader  0         target  400

    box.style.left =  xxxx +  “px”

leader = leader + (target - leader ) /10 ;

btn.onclick = function() {
     setInterval(function(){
         leader = leader + (target - leader )/10;
         box.style.left = leader + "px";
     },30)
 }