废话不多说了 ， 直接给大家贴代码了。
无缝轮播图
<Title> 无缝轮播图 </title> <yoy>*{margem: 0; preenchimento: 0; } ul {estilo de lista: nenhum;}. banner {width: 600px; altura: 300px; borda: 2px sólido #ccc; margem: 100px Auto; posição: relativa; estouroflow: hidden;}. 100%; text-align: centro; tamanho da fonte: 0;}. Num li {width: 10px; altura: 10px; fundo: rgba (0,0,0,0.5); display: bloco; borda-radius: 100%; exibição: bloco em linha; margem: 0 5px; 50px; Altura: 100px; Antecedentes: RGBA (0,0,0,0,6); cor: #FFF; Size de fonte: 40px; altura da linha: 100px; Text-align: Center; Cursor: Pointer;}. 0; topo: 50%; margem-top: -50px;}. Num .Active {Background-Color: #FFF;} </style> <script src = "http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js" <libs/jger> </script> </script> </script> href = "#"> <img src = "img/1.jpg"> </a> </li> <li> <a href = "#"> <img src = "img/2.jpg"> </a> </li> <li> <a href = "#"> <mg src = "iMg/3. a <b) href = "#"> <img src = "img/4.jpg"> </a> </li> <li> <a href = "#"> <img src = "img/5.jpg"> </a> </li></ul> </ul> // <div> <pan> <</span> <pan>> </span> </div> </div> <critript> $ (function () {var i = 0; var timer = null; para (var j = 0; j <$ ('. li '). Primeiro (). addclass (' ativo ');下一个按钮 $ ('. Avançar'). Clique em (function () {i ++; if (i == $ ('. Img li'). Comprimento) {i = 1; // 这里不是 i = 0 $ ('. Img'). Css ({{esquerda: 0}); // 保证无缝轮播 ， 设置 esquerda 值}; $ ('. Img'). Stop (). Animate ({esquerda: -i*600}, 300); if (i == $ ('. Img li'). Comprimento-1) {// 设置小圆点指示 $ ('. li '). Eq (0) .Addclass (' Active '). Siblings (). RemoveClass (' Active ');} else {$ ('. num li '). Eq (i) .addclass (' Active ') (i ==-1) {i = $ ('. img li'). comprimento-2; $ ('. img'). css ({esquerda:-($ ('. img li'). comprimento-1)*600});} $ ('. img'). stop (). Anima ({esquerda:-*600}, 300); li '). Eq (i) .Addclass (' Active '). Siblings (). RemoveClass (' Active ');}) // 设置按钮的显示和隐藏 $ ('. Banner '). Hover (function () {$ (' li '). mouseOver (function () {var _index = $ (this) .index (); $ ('. img '). stop (). Animate ({esquerda: -_ index*600}, 150); $ ('. num li '). Eq (_index) .Addclass (' Active '). Siblings (). RemoveClass (' Active ');}) // timer = setInterval (function () {i ++; if (i == $ ('. img li '). {i = 1; $ ('. img'). CSS ({esquerda: 0});}; $ ('. img'). stop (). Animate ({esquerda: -i*600}, 300); if (i == $ ('. img li'). Length-1) {$ ('. li '). Eq (0) .Addclass (' Active '). Siblings (). RemoveClass (' Active ');} else {$ ('. num li '). Eq (i) .Addclass (' Active '). Siblings (). RemoveClass (' Active ');}}, 1000) // 鼠标移入 ， 暂停自动播放 ， 移出 移出 ， 开始自动播放 $ (' (i == $ ('. img li'). comprimento) {i = 1; $ ('. img'). CSS ({esquerda: 0});}; $ ('. img'). stop (). Animate ({esquerda: -i*600}, 300); if (i == $ ('. img li'). li '). Eq (0) .Addclass (' Active '). Siblings (). RemoveClass (' Active ');} else {$ ('. num li '). Eq (i) .addclass (' ativo '). Siblings (). RemoveClass (' Active ');}, 1000)以上代码是使用 JS 实现的无缝轮播效果 ， 代码比较简单 ， 所以没有给大家注释 ， 如果有疑问欢迎给我留言。