javascript - 如何实现 CSS 无缝轮播图？

问题描述

问 题

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

我大概知道方法是设置 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');
})
        

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

解决方案

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

这篇关于javascript - 如何实现 CSS 无缝轮播图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！