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" <Viv> <img src = "image/6.jpg"/> </div> </div> <div> <</div> <div>> </div> <divi ident
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; Línea de altura: 90px; tamaño de fuente: 40px; Arriba: 155px;/*Altura de la imagen 400/2-45*/cursor: puntero; /*Display:None;*/}.btnright {izquierda: 840px;/*Ancho de imagen 900 Ancho de navegación 60*/}#Tabs {posición: Absolute; Arriba: 370px; margen-izquierda: 350px;}. tab {altura: 20px; Ancho: 20px; Antecedentes:#05E9E2; Línea de altura: 20px; Text-Align: Center; tamaño de fuente: 10px; flotante: izquierda; Color: #ffffff; margen-derecha: 10px; Border-Radius: 100%; cursor: pointer;}. Bg {fondo:#00ff21;}Código JS:
//// <<referencia ruta = "_ referencias.js"/> var i = 0; // Variable global // Definir una variable para obtener el proceso de Time VAR de Carousel; $ (function () {// 1. Después de que se cargue la página, encuentre el primer objeto con clase igual a Swapimg y permita que lo muestre. Su elemento hermano está oculto $ (". para detenerse después de que el mouse se coloque? (i == 0) {i = 6; función show () {//$("#allswapimg").Hover(function () // {// $ (". Btn"). show (); //}, function () // {// $ (". Btn"). Hide (); //}); // Fadein (300) se desvanece en, FadeOut (300) se desvanece, filtrando tiempo 0.3s $ (". $ (". tab"). eq (i) .addclass ("bg"). SiBlings (). show ();El ejemplo anterior de simplemente darse cuenta del efecto de las imágenes de carrusel es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.