前端之家收集整理的这篇文章主要介绍了
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 。
此时请注意盒子里面数字和颜色的变化!
<
Meta charset="UTF-8">
<
Meta name="viewport" content="width=device-width,initial-scale=1.0">
<
Meta http-equiv="X-UA-Compatible" content="ie=edge">
Document