He compartido un algoritmo de gráfico de carrusel que cambia la jerarquía antes. Hoy, sigo usando la transparencia para lograr un algoritmo de gráfico de carrusel sin desplazamiento.
Lógica de implementación: coloque todas las imágenes para que se unan, es decir, apilarlas la capa por capa y use los atributos jerárquicos para ajustar el orden de imagen correcto, establezca la transparencia de la imagen en 0 y luego haga la transparencia de la primera imagen inicial a 1. El algoritmo específico es el siguiente:
<! DOCTYPE HTML> <html> <HEAD> <meta charset = "utf-8"> <title> Cambiar algoritmo de transparencia (clásico) </title> <style media = "pantalla"> * {margen: 0; relleno: 0; } .wrap {ancho: 60%; margen: auto; Posición: relativo; } .wrap img {ancho: 100%; Posición: Absoluto; Izquierda: 0; arriba: 0; Transición: 2s; } .wrap img: nth-child (1) {posición: relativo; } .wrap .follow {ancho: 150px; Altura: 30px; margen: auto; Pantalla: Flex; Justify-Content: Space-between; } .wrap .follow -span {ancho: 10px; Altura: 10px; Radio fronterizo: 50%; borde: 3px gris sólido; } .wrap .Follow Span: Hover {cursor: pointer; } </style> </head> <body> <div> <img src="img/01.jpg" /> <img src="img/02.jpg" /> <img src="img/03.jpg" /> <img src="img/04.jpg" /> <input id="leftBut" type="button" name="name" value = "◀︎"> <input id = "rightBut" type = "button" name = "name" value = "▶ ︎"> <div> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> </span> </span> </body> <script type = "text/javascript"> // obtiene el elemento requerido document.QueryselectorAll ('. wrap img'); var spans = document.QuerySelectorAll ('. var LeftBut = document.getElementById ('LeftBut'); var rightbut = document.getElementById ('RightBut'); // Definir la función de parámetro showImage (index) {for (var i = 0; i <images.length; i ++) {span [i] .index = i; // atributas personalizadas, obtener las imágenes de subíndice correspondientes [i] .index = i; // Atributes personalizados, obtenga las imágenes de subscript correspondientes [i] .Style.zindex = 100 - I; // La imagen de orden de imagen. '0'; // Asigna toda la transparencia de la imagen a 0 tramos [i] .style.background = 'gris'; // Todos los puntos de Beijing están configurados en negro} // Asignar la transparencia de la imagen del valor de subíndice de parámetros entrantes a 1 imágenes [índice] .style.opacity = '1'; // Asigna el color de fondo de la imagen con el valor del subíndice de parámetros entrantes a los tramos blancos [índice] .style.background = 'White'; } showImage (0); // Establezca inicialmente el estilo de la imagen con el valor del subíndice de parámetros entrantes en 0 var cond = 1; // Get Counter // Definir la función automática de carrusel ImageMove () {// Si el valor del recuento puede ser divisible por 4, luego reasignar el recuento a 0; if (Count % 4 == 0) {count = 0; } // pasar el valor de conteo como parámetro a la función showImage (); showImage (recuento); Count ++; // Ejecutar una vez +1} // Establezca la función imageMove () para llamar una vez cada dos segundos y asignarlo a ImageInitialMove var ImageInitialMove = setInterval ('imageMove ()', 2000); // Haga clic en el evento LeftBut.Oncclick = function () {// Borrar el temporizador ClearInterval (ImageInitialMove); // Dado que la dirección es opuesta a la rueda automática, es necesario juzgar que el valor del recuento es 0, reasignarla a 4 y continuar con bucle if (count == 0) {count = 4; } count-; showImage (count); // llamando al recuento de funciones primero desde -imageInitialMove = setInterval ('imageMove ()', 2000); } // the Right To-RightBut.OnClick = function () {ClearInterval (ImageInitialMove); imagemove (); // porque la dirección es la misma que el carrusel automático, llame directamente // reasignar el temporizador imageInitialMove = setInterval ('imagemove ()', 2000); } // Haga clic en el evento para puntos para (var i = 0; i <spans.length; i ++) {spans [i] .onClick = function () {clearInterval (imageInitialMove); // Asigna el valor de subíndice del punto que se hace clic actualmente para contar count = event.target.index; // llamar a la función showImage (count); ImageInitialMove = SetInterval ('ImageMove ()', 2000); }} </script> </html>Maravilloso intercambio de temas: jQuery Picture Carousel JavaScript Picture Carousel Bootstrap Picture Carousel
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.