废话不多说了 ， 直接给大家贴代码了。
： ：
<title> 无缝轮播图 </title> <style>*{margin: 0 ؛ padding: 0 ؛ } ul {list-style: none ؛} 100 ٪ ؛ text-align: center ؛ font-size: 0 ؛}. num li {width: 10px ؛ height: 10px ؛ background: rgba (0،0،0،0،5) ؛ display: border ؛ border-radius: 100 ٪ ؛ display: inline block ؛ margin: 0 5px ؛ pointer ؛ btn}. 50px ؛ الارتفاع: 100px ؛ الخلفية: RGBA (0،0،0،0.6) ؛ اللون: #fff ؛ الحجم: 40px ؛ خط الذروة: 100px ؛ النص-align: center ؛ cursor: pointer ؛}. المطلق ؛ اليمين: 0 ؛ أعلى: 50 ٪ ؛ الهامش-توب: -50pX ؛} href = "#"> <img src = "img/1.jpg"> </a> </li> <li> <a href = "#" href = "#"> <img src = "img/4.jpg"> </a> </li> <li> <a href = "#"> <img src = "img/5.jpg"> </a> // <viv> <span> <</span> <span>> </span> </viv> </viv> <script> $ (function () {var i = 0 ؛ var timer = null ؛ for (var j = 0 ؛ j <$ ('. img li'). length ؛ j ++) {// 创建圆点 $ ('. num'). li '). أولاً () addClass (' نشط ') ؛下一个按钮 $ ('. التالي'). انقر فوق (function () {i ++ ؛ if (i == $ ('. img li'). length) {i = 1 ؛ // 这里不是 i = 0 $ ('. img'). css ({keft: 0}) ؛ // 保证无缝轮播 ， 设置 设置 值 值} ؛ $ ('. img'). stop (). animate ({left: -i*600} ، 300) ؛ if (i == $ ('. img li'). length-1) {// 设置小圆点指示 $ ('. num li ') (i ==-1) {i = $ ('. img li'). length-2 ؛ $ ('. IMG'). li '). eq (i) .addclass (' active '). siblings (). removeclass (' active ') ؛}) // 设置按钮的显示和隐藏 $ ('. banner '). hover () {$ ('. btn ') li '). mouseover (function () {var _index = $ (this) .index () ؛ $ ('. img '). stop () li '). eq (_index) .addClass (' نشط ') {i = 1 ؛ $ ('. img'). css ({يسار: 0}) ؛} ؛ $ ('. img'). stop (). li ') li '). eq (i) .addclass (' active '). siblings (). removeclass (' active ') ؛} ، 1000) // 鼠标移入 ， 暂停自动播放 暂停自动播放 ， ， ， 开始自动播放 开始自动播放 开始自动播放 $ (' (i == $ ('. img li'). الطول) {i = 1 ؛ $ ('. img'). css ({left: 0}) ؛} ؛ $ ('. img'). stop (). li ')以上代码是使用 JS 实现的无缝轮播效果 ， 代码比较简单 ， 所以没有给大家注释 ， 如果有疑问欢迎给我留言。