原理：盒子内套入一个绝对定位的盒子，改变left值，实现轮播
通常滑动的小圆点也是动态生成，因为很多时候，我们拿到的数据都是动态的
1、准备html和css
<style> * { margin: 0; padding: 0; } ul, li, ol { list-style: none; } .slider { width: 590px; height: 470px; border: 1px solid #eee; margin: 100px auto; padding: 5px; position: relative; } .inner { width: 100%; height: 100%; background: pink; position: relative; overflow: hidden; } .inner img { display: block; } .inner ul { width: 800%; position: absolute; top: 0; left: 0; } .inner li { float: left; } .slider ol { position: absolute; left: 50%; margin-left: -80px; bottom: 10px; } .slider ol li { float: left; width: 18px; height: 18px; background: #fff; margin-right: 10px; text-align: center; line-height: 18px; } .slider ol li.current { background: coral; cursor: pointer; } </style>
<div class="slider" id="slider"> <div class="inner"> <ul> <li><a href="#"><img src="img/l1.jpg" alt=""></a></li> <li><a href="#"><img src="img/l2.jpg" alt=""></a></li> <li><a href="#"><img src="img/l3.jpg" alt=""></a></li> <li><a href="#"><img src="img/l4.jpg" alt=""></a></li> <li><a href="#"><img src="img/l5.jpg" alt=""></a></li> <li><a href="#"><img src="img/l6.jpg" alt=""></a></li> </ul> </div> </div>
2、准备缓动动画函数
3、动态复制第一个元素放到最后
4、动态生成小圆点
5、鼠标经过小圆点时，切换圆点样式
6、轮播的核心，定时器
7、最后，贴上所有js代码
菜鸟献丑，欢迎指正文章来源: 纯js实现无缝滑动轮播