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

本文主要是介绍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)}

这篇关于2018/2/6 无缝滚动与缓动动画的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---