无缝轮播——改ul的marginLeft

轮播图几乎存在于每个网站的主页。轮播图的实现方法有很多种，比如改变img的display、img的opacity或者改变ul的marginLeft达到无缝轮播等等。今天给大家介绍最后那种方法——无缝轮播。

如下两张图是无缝轮播的实现原理。通过定位把li中的图片拼成一长条，div#pic设置了overflow:hidden;致使只有一张图片显示，JS控制ul的marginLeft来移动ul，从而显示不同的图片。当“向左”轮播时，从第二个5.jpg变换到第二个1.jpg后，需要迅速显示第一个1.jpg，这个过程由于很迅速，肉眼无法识别，则可以达到无缝效果。