废话不多说了 ， 直接给大家贴代码了。
：
<Title> 无缝轮播图 </Title> <style> * {margin: 0; padding: 0; } ul {style liste: aucun;}. Banner {largeur: 600px; hauteur: 300px; bordure: 2px solide #ccc; margin: 100px auto; position: relative; overflow: caché;}. img {position: absolu; top: 0; gauche: 0} .Img li {float: gauche;}. 100%; Text-Align: Center; Font-Size: 0;}. Num li {largeur: 10px; hauteur: 10px; arrière-plan: RGBA (0,0,0,0,5); Affichage: Block; Border-Radius: 100%; Affichage: Block en ligne; marge: 0 5px; Cursor: Pointer;}. Btn {Affichage: Aucun;}. 50px; hauteur: 100px; arrière-plan: RGBA (0,0,0,0,6); couleur: #fff; font-size: 40px; line-height: 100px; text-align: Center; curseur: pointeur;}. Btn .prev {position: absolue; gauche: 0; top: 50%; margin-top: -50px;}. BTN. Absolute; à droite: 0; top: 50%; marge-top: -50px;}. num .active {background-Color: #fff;} </ style> <script src = "http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"> </cript> </10 <dody> 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"> </a> href = "#"> <img src = "img / 4.jpg"> </a> </li> <li> <a href = "#"> <img src = "img / 5.jpg"> </a> </li></ul> <ul> </ul> // <div> <span> << / span> <span >> </span> </div> </div> <script> $ (function () {var i = 0; var timer = null; for (var j = 0; j <$ ('. img li'). le long; j ++) {// 创建圆点 $ ('. num'). li '). First (). AddClass (' active ');下一个按钮 $ ('. Suivant'). Cliquez sur (fonction () {i ++; if (i == $ ('. Img li'). Longueur) {i = 1; // 这里不是 i = 0 $ ('. Img'). Css ({Left: 0}); // 保证无缝轮播 ， 设置 gauche 值}; $ ('. Img'). Stop (). Animate ({Left: -i * 600}, 300); if (i == $ ('. Img li'). Longueur-1) {// 设置小圆点指示 $ ('. li '). eq (0) .addclass (' active '). silets (). reroveclass (' active ');} else {$ ('. num li '). eq (i) .addclass (' active '). sidats (). reviveclass (' active ');}}) // 上一个按钮 上一个按钮' '. (i == - 1) {i = $ ('. Img li'). longueur-2; $ ('. img'). CSS ({Left: - ($ ('. img li'). Length-1) * 600});} $ ('. img'). stop (). Animate ({Left: -i * 600}, 300); $ ('. li '). eq (i) .addclass (' active '). silets (). reroveclass (' active ');}) // 设置按钮的显示和隐藏 $ ('. bannière '). hover (function () {$ ('. btn '). show ();}, function () {$ ('. btn '). cide ();}) // ». li '). MouseOver (function () {var _index = $ (this) .index (); $ ('. img '). stop (). animate ({Left: -_ index * 600}, 150); $ ('. num. li '). eq (_index) .AddClass (' active '). sileds (). reposoveclass (' active ');}) // 定时器自动播放 timer = setInterval (function () {i ++; if (i == $ ('. img li '). longueur). {i = 1; $ ('. img'). css ({Left: 0});}; $ ('. img'). stop (). Animate ({Left: -i * 600}, 300); if (i == $ ('. IMg li'). Longueur-1) {$ ('. num. li '). Eq (0) .AddClass (' active '). Sibllings (). RepoveClass (' active ');} else {$ ('. num li '). eq (i) .addclass (' active '). sibllings (). removeClass (' active ');}}, 1000) // 鼠标移入 ， 暂停自动播放 ， 移出 ， 开始自动播放 $ ('. Banner '). (i == $ ('. img li'). longueur) {i = 1; $ ('. img'). css ({Left: 0});}; $ ('. img'). stop (). Animate ({Left: -i * 600}, 300); if (i == $ ('. IMG li'). li '). eq (0) .AddClass (' active '). silels (). reroveClass (' active ');} else {$ ('. num li '). eq (i) .addclass (' active '). siBling以上代码是使用 JS 实现的无缝轮播效果 ， 代码比较简单 ， 所以没有给大家注释 ， 如果有疑问欢迎给我留言。