Los diagramas de carrusel siguen siendo relativamente comunes en futuras aplicaciones y se pueden implementar sin mucha línea de código. Pero si solo domina el conocimiento básico de JS, ¿cómo puede usar menos métodos lógicos simples y simples para lograrlo? Aquí hay algunas prácticas diferentes:
1. Use el método de desplazamiento para lograr
Primero, podemos agregar un DIV al cuerpo y establecer el ancho en un porcentaje (página adaptativa). Si la proporción es específica para cuyo porcentaje es relativo, lo haremos de acuerdo con las necesidades. No diré mucho aquí. Pon la imagen en el Div.
En segundo lugar, la pieza de estilo establece todas las etiquetas IMG en absoluto para facilitar el posicionamiento
Finalmente, la parte JS habla sobre la lógica, definiendo dos matrices vacías. La primera matriz se usa para guardar la imagen inicial que se muestra en la página y la imagen que espera entrar, y la segunda matriz guarda las imágenes N restantes. Suponga que estas dos matrices están establecidas en: waithohow = []; y goout = []; waithohow.hift (); Si la primera imagen se llama showfirst, y el tiempo de desplazamiento y movimiento se establece para la imagen ShowFirst. Después de completar la ejecución, coloque el showfirst en la cola de la cabrona: goout.push (showfirst); En este momento, el elemento 0 de la matriz de Waithohow se convierte en la segunda imagen original que se muestra. Establezca el tiempo de desplazamiento y movimiento para esta imagen Waithohow [0], y abre la imagen del primer elemento de la matriz de seriedad y colóquela en la cola de la matriz de Waithohow para asegurarse de que la matriz de Waithohow siempre sea una imagen mostrada y la imagen que se exhibirá. De esta manera, las dos matrices forman un bucle para completar la implementación de la imagen del carrusel. La lógica inversa es la misma (debido a que la lógica es demasiado complicada, no se recomienda aquí)
2. El método de usar el nivel de la jerarquía para cambiar la imagen superior (este método no tiene acciones de desplazamiento, pero la lógica es muy simple y práctica)
Es más intuitivo codificar directamente: básicamente cada línea tiene comentarios
<! DocType html> <html> <fead> <meta charset = "utf-8"> <title> Carousel Diagram (flash adaptativo) </title> <style media = "screen">* {margin: 0; relleno: 0;}. Envoltura {ancho: 60%; fondo: rojo; margen: auto; posición: relativo;}. Absolute;/*Z-Index: 10;*/} input {border: 1px sólido de luz; ancho: 50px; altura: 30px; fondo: rojo; border-radius: 5px; font-size: 20px;} </style> </head> <body> <div> <img src = "img/01.jpg"/> <img src = "IMg/02. j.jgg/02. IMg" /> <img src = "img/03.jpg"/> <img src = "img/04.jpg"/> </div> <input type = "button" id = "butleft" name = "name" valor = "◀︎"> <input type = "button" id = "butright" name = "name" valor = "︎"> </cuerpo> <script type " Elemento de imágenes para generar una matriz de cadenas. La matriz de cadenas no puede realizar Push Pop Splice u otras operaciones //, por lo que necesita reestera su valor en una matriz, con la definición después var Images = document.getElementsBytagName ('img'); var butleft = document.getElementById ('butleft'); var butrright = document.getEntElementById ('ButRight'); // Obtenga la variable de Variable Usada para establecer el nivel para el nivel subsecutivo de su posterior. 1000; // Obtenga una matriz vacía para almacenar los elementos de cadena en imágenes var de imágenes = []; // para bucle se usa para asignar valores a la matriz Imagess y cambiar el nivel de elementos en la matriz para (var i = 0; i <images.length; i ++) {imagess [i] = imágenes [i]; var currentImage = imagess [i]; // la configuración de nivel actual de la imagen, una redonde de la imagen de la imagen, una redonde de la imagen de la redonda de la imagen del bucle inicial. Cuanto mayor sea la imagen, mayor es la configuración de nivel, por lo tanto, -i, de modo que las imágenes serán de la primera y segunda imagen en orden ... hacia abajo en la secuencia CurrentImage.style.zindex = -i;} // Establezca el recuento de contadores, realice un evento de clic (izquierda o derecha) Cuenta más 1var Count = 0; // el click Var a la izquierda. imagess.shift (); // Establecer un nivel para el elemento de imagen popped, es decir, -1000 + count, // hacer que el nivel sea el más pequeño en comparación con otros elementos, la imagen aparece en el cabezal de la matriz se mostrará en la parte inferior del showfirst.style.zindex = - índice + count; // después de que el cambio de nivel se complete, presione en la cola de la cola de la array.push (showfirst); 1, no considere el valor específico, simplemente haga clic en Evento más 1 conteo ++;} // Haga clic en el evento a la derecha Butright.OnClick = function () {// Pop en un elemento desde la cola de las imágenes y asignarlo a showFirstVar showFirst = imagess.pop (); // Establezca el nivel de el nivel de showfirst. +Count; // Después de que cambia el nivel, inserte en la cabeza de la matriz Imagess Images.unshift (showFirst); // Haga clic una vez para agregar 1Count ++;} </script> </html>El artículo de lectura obligatoria anterior sobre el JS básico (implementación simple de Click Event Carousel) es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.