废话不多说了 ， 直接给大家贴代码了。
无缝轮播图 ：
<title> 无缝轮播图 </title> <style>*{Margin: 0; Padding: 0; } ul {list-style: none;}. Banner {width: 600px; высота: 300px; граница: 2px solid #ccc; маржа: 100px Auto; позиция: относительно; переполнение: hidden;}. Img {position: Absolute; Top: 0; слева: 0}. 100%; Text-Align: Center; Font-Size: 0;}. Num li {ширина: 10px; высота: 10px; фон: rgba (0,0,0,0,5); отображение: блок; граница-радиус: 100%; отображение: встроенный блок; 50px; Высота: 100px; фон: Rgba (0,0,0,0,6); цвет: #fff; font-size: 40px; line-hight: 100px; текст-альбом: центр; курсор: pointer;}. Btn .prev {положение: абсолютное; слева: 0; top: 50%; margin-top: -50px; Absolute; справа: 0; Top: 50%; Margin-top: -50px;}. num .active {founal-color: #fff;} </style> <script src = "http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js. href = "#"> <img src = "img/1.jpg"> </a> </li> <li> <a href = "#"> <img src = "img/2.jpg"> </a> </li> <li> <a href = "#"> <img src = "img/3.jpg" href = "#"> <img src = "img/4.jpg"> </a> </li> <li> <a href = "#"> <img src = "img/5.jpg"> </a> </li> </ul> <ul> </ul> // <div> <pan> <</span> <pan >> </span> </div> </div> <script> $ (function () {var i = 0; var timer = null; for (var j = 0; j <$ ('. img li'). Length; j ++) {// $ ('. li '). First (). AddClass (' Active ');下一个按钮 $ ('. Next'). Click (function () {i ++; if (i == $ ('. Img li'). Length) {i = 1; // 这里不是 i = 0 $ ('. Img'). CSS ({слева: 0}); // 保证无缝轮播 ， 设置 слева 值}; $ ('. Img'). Stop (). Animate ({left: -i*600}, 300); if (i == $ ('. Img li'). Длина-1) {// 设置小圆点指示 $ ('. li '). eq (0) .AdDClass (' Active '). Siblings (). removeClass (' active ');} else {$ ('. num li '). eq (i) .AdClass (' Active '). Siblings (). removeClass (' Active ');}}) // 上一个按钮 $ (' (i ==-1) {i = $ ('. Img li'). Length-2; $ ('. Img'). CSS ({left:-($ ('. Img li'). Length-1)*600});} $ ('. Img'). Stop (). Animate ({left: -i*600}, 300); li '). eq (i) .addclass (' active '). Siblings (). removeclass (' active ');}) // 设置按钮的显示和隐藏 $ ('. Banner '). Hover (function () {$ ('. Btn '). Show ();}, function () {$ ('. Btn ').) li '). mouseover (function () {var _index = $ (this) .index (); $ ('. Img '). Stop (). Animate ({left: -_ index*600}, 150); $ ('. num li '). eq (_index) .AdDClass (' active '). Sibllings (). removeClass (' active ');}) // 定时器自动播放 timer = setInterval (function () {i ++; if (i == $ ('. Img li '). Длина). {i = 1; $ ('. Img'). CSS ({left: 0});}; $ ('. img'). Stop (). Animate ({left: -i*600}, 300); if (i == $ ('. Img li li '). eq (0) .AdDClass (' Active '). Сестры (). removeClass (' active ');} else {$ ('. num li '). eq (i) .addclass (' active '). Siblings (). removeclass (' active ');}}, 1000) // 鼠标移入 ， 暂停自动播放 ， 移出 ， 开始自动播放 $ ('. Banner '). Hover (function () {clearInterval (timer);}, {) {{timer = setInterval (iSectorVal (iSemElind (iSemElind (i (I); (i == $ ('. Img li'). Length) {i = 1; $ ('. Img'). CSS ({слева: 0});}; $ ('. Img'). Stop (). Animate ({слева: -и*600}, 300); if (i == $ ('. Img li'). li '). eq (0) .AdDClass (' Active '). Siblings (). RemoveClass (' Active ');} else {$ ('. num li '). EQ (i) .AdClass (' Active '). Siblings (). RemoveClass (' Active ');}, 1000)})}) </script>以上代码是使用 JS 实现的无缝轮播效果 代码比较简单 ， 所以没有给大家注释 ， 如果有疑问欢迎给我留言。