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实现多张图片左右无缝滚动效果
URL链接:http://hxwzsj.com/article/ipspes.html

其他资讯

Copyright © 2025 青羊区翔捷宏鑫字牌设计制作工作室(个体工商户) All Rights Reserved 蜀ICP备2025123194号-14
友情链接: 网站设计 成都网站建设公司 成都网站建设 成都网站设计 网站建设推广 企业网站建设 网站建设开发 企业网站制作 成都营销网站建设 营销型网站建设 广安网站设计 成都网站建设 成都网站制作 企业网站设计 成都网站设计公司 网站建设 高端网站设计 成都商城网站建设 成都网站建设 外贸网站建设 重庆电商网站建设 网站建设费用