利用Js+transform实现无限轮播效果

要求：实现每2秒轮播下一个列表项，无限循环

无限轮播

实现原理就是每隔2s，利用 transform:translate向上移动一个块的距离。不过这样到了最后一个块时，会出现刷刷刷向下不停滚动到第一个块的画面。

以前实现的版本，利用setInterval来改变absolute、top的位置来实现类似transform:translate的功能，需要计算clientHeight, scrollHeight，现在css3方便多啦

要实现无限循环，得在最后一个块下再复制一个第一块。这样滚动到最后一个复制块时，直接替换成第一个块的位置，由于两个块一样，用户感知不到画面变动过（就好像是最后一个块下面接着循环滚动到了第一个块）。然后再接着重复之前的动画即可。

<div class="swipe-wrap">
  <div class="swipe-container" id="swiperWrap">
    <span>item1</span>
    <span>item2</span>
    <span>item3</span>
    <!-- 列表最后复制第一项内容-->
    <span>item1</span>
  </div>
</div>

.swipe-wrap{
  height: 45px;
  overflow: hidden;
}
.swipe-container{
  position: relative;
  display: flex;
  flex-direction: column;
}
.task-box-swipe-list-title{
  height: 45px;
}

var list =['item1', 'item2', 'item3']; // 模拟dom元素列表项，真实需要自己做dom操作。
var swiperTime = null;
var ele = document.getElementById("swiperWrap");

function swiperList() {
  var len = list.length;
  if (len > 1) { // 列表项大于1时，才做swiper动画。
    list.push(list[0]); // 这里是模拟，在dom元素的末尾，添加列表第一项，真实需要自己做dom操作。
    var cur = 0;
    var swpier = function (delay) {
      swiperTime = setTimeout(function () {
        cur += 1;
        if (cur > len) {
          // 这时表示到了最后一个复制块，直接无动画移动到真实的第一个元素
          cur = 0;
          ele.style.transition = "none";
          ele.style.transform = "translateY(0)";
          swpier(1000);
        } else {
          var top = -45 * cur;
          ele.style.transform = "translateY(" + top + "px)";
          ele.style.transition = "all 1s";
          cur === len ? swpier(1000) : swpier(2000); // 如果是最后一个复制块，间隔时间需要修改，加上最上面的替换块，合计2s。
        }
      }, delay)
    }
    swpier(2000);
  }
}