1. Puntos clave:
1. Cuando la página está cargada, las imágenes se superponen y apilan [posicionamiento absoluto];
2. La primera imagen muestra, otros están ocultos;
3. Establezca el subíndice y establezca el color del subíndice para que se mueva con la imagen;
4. Mueva el mouse a la imagen, muestre los iconos de movimiento izquierdo y derecho, mueva el mouse y continúe con carrusel;
2. Código de implementación:
Código HTML:
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> carusel chart </title> <linke href = "css/lunbimg.css" rel = "stylesheet"/> <script src = "js/jQuery-1.10.2.min.js"> </script> <script src = "js/lunbimg.js"> </script> </head> <body> <divid src = "imagen/1.jpg"/> </div> <div> <img src = "image/2.jpg"/> </div> <div> <img src = "image/3.jpg"/> </div> <div> <img src = "image/4.jpg"/> </div> <div> <img src = "image/5.jpg" /> </div> <div> <img src = "image/6.jpg"/> </div> </div> <div> <</div> <div>> </div> <div >> id = "Tabs"> <viv> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> <div> 5 </div> <div> 6 </div> </div> </body> </html>
Código CSS:
* {relleno: 0px; margen: 0px;}. swapimg {posición: absoluto;}. Btn {posición: absoluto; altura: 90px; ancho: 60px; fondo: rgba (0,0,0,0.5);/* Establezca el color de fondo en negro y la transparencia es 50%*/Color: #ffffff; text-align: Center; Line-Height: 90px; Font-Size: 40px; Top: 155px;/*Image Height 400/2-45*/cursor: pointer;/*visual {posición: absoluto; superior: 370px; margen-izquierda: 350px;}. Tab {altura: 20px; ancho: 20px; fondo:#05e9e2; line-height: 20px; text-align: center; font-size: 10px; float: left; color: #ffffff; margin-right: 10px; border-radio: 100%; cursor: pointer;}. bg {fondo:#00ff21;}Código JS:
//// <<referencia ruta = "_ referencias.js"/> var i = 0; // Variable global // Defina una variable para obtener el tiempo var de Carousel; $ (function () {// 1. Después de cargar la página, encuentre el primer objeto con clase igual a Swapimg, deje que lo muestre, su elemento de hermanos está oculto $ (". $ (this) .index (); show (); // ¿Cómo detenerse después de que se ponga el mouse? ClearInterval (Time); // Después de hacer clic, -1if (i == 0) {i = 6;} i -; show (); showtime ();}); $ (". btnright"). click (function () {// 1. Antes de hacer clic, necesita detener el acuarelel de carusel (tiempo); // después de hacer clic, -1if (i == 5) -1;} i ++; show (); showtime ();});}); function show () {//$((lwapimg").Hover(function () // {// $ (". Btn"). Show (); //}, function () // {// $ (". Btn"). Hide (); //}); en, FadeOut (300) se desvanece, el tiempo de filtrado 0.3S $ (". Swapimg"). Eq (i) .fadein (300) .siblings (). FadeOut (); $ (". Tab"). Eq (i) .addClass ("BG"). Siblings (). {i ++; if (i == 6) {// Solo hay 6 imágenes, por lo que no puedo exceder 6. Si I es igual a 6, lo haremos igual a la primera imagen i = 0;} show ();}, 3000);}Lo anterior es el código de implementación del diagrama de carrusel basado en JavaScript introducido a usted. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!