Los ejemplos en este artículo comparten con usted el efecto de JS para lograr el cambio de imagen para su referencia. El contenido específico es el siguiente
Use JS para realizar el efecto de hacer clic en botones y cambiar de imágenes:
<div id = "box"> <div id = "img_box"> <img src = "../ raw/b1.jpg"> <img src = "../ raw/b2.jpg"> <img src = "../ raw/b3.jpg"> <img src = "../ raw/b4.jpg"> </div> <hiv id = "izquierda" id = "Right"> </div> </div>
Estructura: use un ancho fijo y altura Div para hacer el contenedor más externo, configure el desbordamiento en oculto,
Luego, la capa interna IMG_Box establece el ancho en cuatro veces el ancho de la caja y la altura es la misma. Es decir, el IMG_Box contiene cuatro IMG, pero solo uno visible lo es. Los dos divs, izquierda y derecha debajo actúan como botones para lograr hacer clic para cambiar de imágenes. Cambiar imágenes significa cambiar el atributo izquierdo de IMG_Box, por lo que IMG_Box debería establecer la posición en absoluto. Por conveniencia, la posición de la caja se establece en relación, por lo que img_box se coloca en relación con el cuadro. Cuatro imágenes se ajustan a la izquierda, con el mismo ancho y altura que la caja.
Código CSS:
*{margen: 0; Pading: 0;}. Box {ancho: 800px; Altura: 400px; Margen: 20px Auto; Posición: relativo; desbordamiento: Hidden;}. img_box {altura: 400px; Ancho: 3200px; Posición: Absoluto; -Moz-transición: 0.5s; -WebKit-Transition: 0.5s;} img {ancho: 800px; Altura: 400px; float: izquierda;}. Switch {ancho: 200px; Altura: 100%; posición: absoluto;}#izquierda {izquierda: 0px; arriba: 0px; Antecedentes: -Moz-Lineal-Dinter-Derment (izquierda, RGBA (84, 84, 84, 0.50), RGBA (20%, 20%, 20%, 0)); Antecedentes: -webkit-lineal-gradiente (izquierda, RGBA (84, 84, 84, 0.50), RGBA (20%, 20%, 20%, 0));}#Derecho {derecho: 0px; arriba: 0px; Antecedentes: -Moz-Lineal-Dinter-Derment (izquierda, RGBA (20%, 20%, 20%, 0), RGBA (84, 84, 84, 84, 0.5)); Antecedentes: -webkit-lineal-gradiente (izquierda, RGBA (20%, 20%, 20%, 0), RGBA (84, 84, 84, 84, 0.5));}#izquierda: Hover {Background: -Moz-Lineal-Gradient (izquierda, RGBA (0, 0, 0,0.5), RGBA (20%, 20%, 20%, 0); Antecedentes: -Moz-Lineal-Gradient (izquierda, RGBA (0, 0, 0,0.5), RGBA (20%, 20%, 20%, 0));}#Derecha: Hover {Background: -Moz-Lineal-Gradient (izquierda, RGBA (20%, 20%, 20%, 0), RGBA (0, 0, 0,0.5)); Antecedentes: -webkit-lineal-gradiente (izquierda, RGBA (20%, 20%, 20%, 0), RGBA (0, 0, 0,0.5));}Izquierda y derecha Use el color de fondo y las propiedades de gradiente de transparencia, solo se agregan el navegador Firefox y el navegador WebKit. Además, algunos navegadores de IE son núcleos duales IE y Webkit como el navegador seguro 360
Antecedentes: -Moz-Lineal-Dinter-Derment (izquierda, RGBA (84, 84, 84, 0.50), RGBA (20%, 20%, 20%, 0));
Antecedentes: -webkit-lineal-gradiente (izquierda, RGBA (84, 84, 84, 0.50), RGBA (20%, 20%, 20%, 0));
Para lograr transiciones suaves durante la conmutación, se agrega la propiedad de transición:
-Moz-transición: 0.5s;
-Webkit-transición: 0.5s;
Código JS:
var box; var count = 1; window.onload = function () {box = document.getElementById ("img_box"); var izquierda = document.getElementById ("izquierda"); var right = document.getElementById ("Right"); Left.AdDeventListener ("Haga clic", _ Izquierda); right.adDeventListener ("hacer clic", _ derecho); document.body.addeventListener ("mouseover", demo);} function _right () {var dis = 0; if (count <4) {dis = count*800; } else {dis = 0; recuento = 0; } box.style.left = "-"+dis+"px"; count+= 1;} función _left (evento) {var dis = 0; if (count> 1) {dis = (2-contenido)*800; } else {dis = -3*800; recuento = 5; } box.style.left = dis+"px"; recuento- = 1;}Use el recuento de variables globales para grabar la imagen que se muestra actualmente. Al hacer clic en el botón de alternancia, calcule qué imagen se debe mostrar de acuerdo con el recuento, y luego calcule y establezca el atributo izquierdo de IMG_Box.
El anterior es el código para implementar los efectos de conmutación de imágenes por parte de JS. Espero que pueda ayudarlo a lograr los efectos de conmutación de imágenes.