Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
893 views
in Technique[技术] by (71.8m points)

如何实现 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');
})
        

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...