上中下(左中右)显示三个图片时无缝轮播

思路:  假如有三张图 每次到第二张滚第三张的时候在结尾加上第一张, 第三张滚的下一个就是第一张了同时加上第二张,这样就实现了无缝轮播(别打我)

咳咳, 上面的思路确实实现了,但是存在一个致命的问题就是一直轮播会一直在后面添加元素,如果次数较多的时候会导致页面卡顿, 那我们就不能一直加

如果在再填加了第三张的时候是不是已经页面存在六张图了,我们完全可以利用这六张图让他们自己循环实现无缝轮播

            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)