思路: 假如有三张图 每次到第二张滚第三张的时候在结尾加上第一张, 第三张滚的下一个就是第一张了同时加上第二张,这样就实现了无缝轮播(别打我)
咳咳, 上面的思路确实实现了,但是存在一个致命的问题就是一直轮播会一直在后面添加元素,如果次数较多的时候会导致页面卡顿, 那我们就不能一直加
如果在再填加了第三张的时候是不是已经页面存在六张图了,我们完全可以利用这六张图让他们自己循环实现无缝轮播
if (this.activeIndex >= this.originDatalist.length * 2) { // 当activeIndex 大于初始状态的两倍时归0 防止一直累加导致dataList列表数据过多导致页面卡顿 this.activeIndex = 0 } $(".line-img").removeClass("active") let move = -300 * this.activeIndex; // 一个列表占300高度 if (move === 0) { // 当轮播到最后一个时 让动画时间归0 去除折回的动画 $(".topic-list ul").animate({ "top": -300 * (this.originDatalist.length - 1) // 先让图片0秒回到第一个列表的最后一张图的位置 }, 0) move = -300 * (this.originDatalist.length - 1) - 300 // 修改move的值让图片假装依次滚动下去,实际从第一个列表最后一张图到第二个列表第一张图的动画 this.activeIndex = this.originDatalist.length // 改变当前active的值 防止active不准确 } $(".topic-list ul").animate({ "top": move }, 2000)
