本文介绍了一种通过改变ul的marginLeft属性实现的无缝轮播图方法。通过将多张图片排列为一条直线，并利用JavaScript控制图片滚动，实现平滑过渡效果。
轮播图几乎存在于每个网站的主页。轮播图的实现方法有很多种，比如改变img的display、img的opacity或者改变ul的marginLeft达到无缝轮播等等。今天给大家介绍最后那种方法——无缝轮播。
如下两张图是无缝轮播的实现原理。通过定位把li中的图片拼成一长条，div#pic设置了overflow:hidden;致使只有一张图片显示，JS控制ul的marginLeft来移动ul，从而显示不同的图片。当“向左”轮播时，从第二个5.jpg变换到第二个1.jpg后，需要迅速显示第一个1.jpg，这个过程由于很迅速，肉眼无法识别，则可以达到无缝效果。
。。。。。。。。。。。。。。。。。。
。。。。。。。。。。。。。。。。。。
扫一扫
754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
