废话不多说了 直接给大家贴代码了。 直接给大家贴代码了。
无缝轮播图 ：
<title> 无缝轮播图 </title> <style>*{margen: 0; relleno: 0; } ul {list-style: none;}. banner {width: 600px; altura: 300px; border: 2px sólido #ccc; margen: 100px automático; posición: relativo; desblow: hidden;}. img {posicion: absoluta; arriba: 0; izquierda: 0} .img li {float: izquierda;}. num {Absolute; 100%; text-align: centro; font-size: 0;}. Num li {ancho: 10px; altura: 10px; fondo: rgba (0,0,0,0.5); display: block; border-radius: 100%; display: inline-block; margen: 0 5px; cursor: punto;}. Btn {visual 50px; altura: 100px; fondo: RGBA (0,0,0,0.6); color: #fff; font-size: 40px; línea-octava: 100px; text-align: centro; cursor: pointer;}. Btn .prev {posición: absoluta; izquierda: top: 50%; margin-top: -50px;}. Btn. absoluto; derecho: 0; arriba: 50%; margin-top: -50px;}. num .active {background-color: #fff;} </style> <script src = "http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"> </script> </scent> <body <body <body <shiv> <shiv> <shiv> <shiv> <shiv> <shiv> <shiv> <shiv> <lius> <li) 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></li><li><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'). longitud; j ++) {// 创建圆点 $ ('. num'). append ('<ri> </li>')} $ ('. li '). Primero (). AddClass (' Active ');下一个按钮 $ ('. // 保证无缝轮播 ， 设置 Izquierda 值}; $ ('. IMG'). Stop (). Animate ({izquierda: -i*600}, 300); if (i == $ ('. Img li'). Longitud-1) {// 设置小圆点指示 $ ('. Num. li '). eq (0) .addclass (' activo '). Siblings (). (i ==-1) {i = $ ('. IMG Li'). Longitud-2; $ ('. IMG'). CSS ({Left:-($ ('. IMG Li'). Longitud-1)*600});} $ ('. IMG'). Stop (). Animate ({izquierda: -i*600}, 300); $ ('. li '). eq (i) .AddClass (' activo '). Siblings (). li '). mouseover (function () {var _index = $ (this) .index (); $ ('. img '). stop (). Animate ({Left: -_ index*600}, 150); $ ('. num num*. num li '). Eq (_index) .AddClass (' activo '). Siblings (). {i = 1; $ ('. img'). CSS ({izquierda: 0});}; $ ('. img'). stop (). Animate ({izquierda: -i*600}, 300); if (i == $ ('. img li'). longitud-1) {$ ('. num li '). eq (0) .addclass (' activo '). siblings (). removeClass (' activo ');} else {$ ('. num li '). eq (i) .AddClass (' activo '). Siblings (). (i == $ ('. img li'). longitud) {i = 1; $ ('. img'). Css ({izquierda: 0});}; $ ('. img'). stop (). Animate ({Left: -i*600}, 300); if (i == $ (. IMg Li '). Longitud-1) {$ ('. li '). eq (0) .addclass (' activo '). Siblings (). RemoVeClass (' activo ');} else {$ ('. num li '). Eq (i) .addclass (' activo '). Siblings (). RemoVeClass (' activo ');}}, 1000)})}) </script> </script以上代码是使用 JS 实现的无缝轮播效果 ， 代码比较简单 所以没有给大家注释 ， 如果有疑问欢迎给我留言。