如何实现 CSS 无缝轮播图？

Question

本人是初学者，准备模仿像 豆瓣读书 这种轮播图。

我大概知道方法是设置 overflow: hidden 然后改变内容的 left 属性值，动画效果是 CSS transition。可是滑到最后一张怎么办？怎么无缝滑动到第一张？
网上的教程说可以复制第一张，然后迅速切回初始位置。我试了一下：

var a = $('.slide-list');
a.append(a.children()[0].outerHTML);    // 复制第一帧附到最后

$('btn-next').click(()=>{
    curPos += width;                    // 更新到下一帧的位置
    if (curPos > end) {
        a.css('left', curPos+'px');     // 滑到了复制的那一帧
        a.css('transition', 'none');    // 在切换前关闭动画
        curPos = start;
        a.css('left', curPos+'px');     // 切换回起始位置
        a.css('transition', 'left ease 0.5s');    // 恢复动画
    }
    else
        a.css('left', curPos+'px');
})
        

可是没有预期的效果。请问正确的方法应该怎么做？ 谢谢~

Answer 1

可以用position控制而不需要复制图片- -现在不方便写代码，不过有一个以前写的竖向滚动的实例，区别只是方向。。可以自己看看参考一下。。(去掉overflow:hidden就能看到具体变化过程)
https://jsfiddle.net/o5oqsodg/

Answer 2

这是以前写的一个，布局大概是ul放很多的li标签，让ul位置移动，下面是点击做箭头的ＪＳ代码

$(".banner .arrow .right-arrow").click(function () {
         // pic就是图片的张数
        if (pic == $(".banner .big-pic  li").length - 1) {

            pic = 0;
            $(".banner  ul").css("left", "0px")
        }
        pic++;

        var target = -pic * imgWidth
        $(".banner ul").stop().animate({"left": target + "px"}, 1000)
    })
    
    // 定时器
        timer = setInterval(function () {
        $(".banner .arrow .right-arrow").click()
    }, 2000)

Answer 3

只复制一张的话，逻辑实际上有点不好理解，我通常都是把所有的图片都复制一份，顺序的放到现在的后边，一直滚动，当复制的那张图片滚动到left是0是，直接把整个外框的left改回到0，保证你看起来很顺滑

Answer 4

假如有1,2,3这三张轮播图，则实际放3,1,2,3,1这五张。
如果向右滚到了3，这时3后面还有一个1，所以看起来就像是从最后一张滚到了第一张，滚完后立即从最后一个1调到第二个1，因为两张图是一样的，所以看不出切换。
同理，向左滚也是如此。
京东首页的那个小轮播图就是这么实现的。