资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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://cdkjz.cn/article/ipspes.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:400-028-6601 / 大客户专线   成都:13518219792   座机:028-86922220