javascript实现多张图片左右无缝滚动效果的示例代码

本文主要介绍了javascript实现多张图片左右无缝滚动效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧

结构：box包含ul，ul包含4个li；ul绝对定位。

复制li-1、li-2到第li-4后面，为了区分于li-1、li-2，内容改为li-5、li-6，颜色不变。此时ul包含6个li。

需要注意的是，移动的是ul这个大盒子而不是li。

原理：当ul 绝对定位的left 值等于（li-1+li-2+li-3+li-4）的宽度时，利用Javascript快速复原left 值为0 。

此时请注意盒子里面数字和颜色的变化！

效果图：

示例代码：

        
  
 
 
li-1
 
li-2
 
li-3
 
li-4
 
li-5
 
li-6
 
 
   

위 내용은 javascript实现多张图片左右无缝滚动效果的示例代码의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!