随笔-jq实现列表轮播

列表轮播

先对tbody设置属性

#testTbody tr{
  position: relative;
}

然后使用jq操作动画效果

var willAdd = getTr(item); //item是即将添加的数据集合，通过getTr获取完成的tr内容
  // <tr>测试内容</tr>
  var circleHeight = '40px'; //平移高度
  // 赋予动画效果
  $('#testTbody tr').last().animate(
    {
      "opacity" : '0'
    },{
      "complete" : function() {
        $('#testTbody tr').last().remove();
        $('#testTbody').prepend(willAdd);
        if (index + 1 < length) {
          setTimeout(() => {
            本函数(数组[index+1], index+1, length) //使用递归重新调用本函数重复执行添加动画
          }, 1000);
        } else {
          数组= [];//递归完成后清空数组
        }
      }
    }
  )
  $('#testTbody tr').animate(
    {
      "top" : circleHeight,
    },{
      "complete" : function() {
        $('#testTbody tr').css("top", "0")
      }
    }
  )

本代码的思路是：
使用animate的动画效果，先让列表的最后一行变透明后删除，完成动画的同时删除该行，并在开头添加一行新的数据
因为之前设置了position为relative所以top属性可以生效
同时执行另一个动画top: 40px造成一个整个列表下移的效果，刚好下移结束，top归0上一个动画已经添加了新的表格到开头
这样就实现了一个数据向下滑动添加的效果