结构：方框包含ul，ul包含四个李；保险商实验所绝对定位。

复制li-1、li-2到第li-4后面，为了区分于li-1、li-2、内容改为li-5、li-6、颜色不变。此时保险商实验所包含6个李。

需要注意的是，移动的是保险商实验所这个大盒子而不是李。

原理：当保险商实验所绝对定位的左边的值等于(li-1 li-2 li-3 li-4)的宽度时，利用Java脚本语言快速复原左边的值为0 。

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

效果图：

示例代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title style media=' screen ' * { padd : 0 0 0；保证金： 0；} ul、李{列表式：无；} img {垂直对齐：顶部；} # box { width: 400px高度： 100像素；余量： 100像素自动；背景-颜色：粉色；相对位置：飞越：隐藏；} # box ul { width: 2000px绝对位置：左： 0；top : 0；} #box li {左侧浮动：} .aa {宽度： 200像素高度： 100像素；} .Li-1 {底色： # f6e 659} .li-2{背景色： # 57fa 4f} .Li-3 {底色： # 3a 8e f1} .li-4{背景色： # c 057 f1}/style/head dy div id=' box ' ul Li class=' Li-1 aa ' Li-1/Li Li class=' Li-2 aa ' Li-2/Li Li class=' Li-3 aa ' Li-3/Li Li class=' Li-4 aa ' Li-4/Li Li class=' Li-1 aa ' Li-5/Li Li class=' Li-2 aa ' Li-6/Li/ul/div/body/html脚本类型=' text/JavaScript ' var box=document。getelementbyid .var ul=box。子级[0]；var num=0；timer=setInterval(fn，10)；函数fn(){ num-；num=-800？num=0 : numul。风格。left=num ' px}/脚本以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！