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 。

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

效果图:

示例代码

<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
Box">

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

原文链接:https://www.f2er.com/js/40528.html

猜你在找的JavaScript相关文章