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 。

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

效果图：

javascript实现多张图片左右无缝滚动效果

示例代码：




 
 
 
 Document
 


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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持创新互联！

网站名称：javascript实现多张图片左右无缝滚动效果
路径分享：http://kswjz.com/article/ipspes.html

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

行业动态