本人是初学者，准备模仿像 豆瓣读书 这种轮播图。
我大概知道方法是设置 overflow: hidden 然后改变内容的 left 属性值，动画效果是 CSS transition。可是滑到最后一张怎么办？怎么无缝滑动到第一张？
网上的教程说可以复制第一张，然后迅速切回初始位置。我试了一下：
4
475var 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');
})
可是没有预期的效果。请问正确的方法应该怎么做？ 谢谢~
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
可以用position控制而不需要复制图片- -现在不方便写代码，不过有一个以前写的竖向滚动的实例，区别只是方向。。可以自己看看参考一下。。(去掉overflow:hidden就能看到具体变化过程)
https://jsfiddle.net/o5oqsodg/
这是以前写的一个，布局大概是ul放很多的li标签，让ul位置移动，下面是点击做箭头的ＪＳ代码
只复制一张的话，逻辑实际上有点不好理解，我通常都是把所有的图片都复制一份，顺序的放到现在的后边，一直滚动，当复制的那张图片滚动到left是0是，直接把整个外框的left改回到0，保证你看起来很顺滑
假如有1,2,3这三张轮播图，则实际放3,1,2,3,1这五张。
如果向右滚到了3，这时3后面还有一个1，所以看起来就像是从最后一张滚到了第一张，滚完后立即从最后一个1调到第二个1，因为两张图是一样的，所以看不出切换。
同理，向左滚也是如此。
京东首页的那个小轮播图就是这么实现的。