En el equipo, de repente me preguntaron cómo implementar imágenes de carrusel. He estado en el campo delantero durante más de un año, pero no lo he escrito yo mismo durante mucho tiempo. Siempre he usado un complemento para escribirlo en Daniu. Hoy escribiré un tutorial simple adecuado para principiantes para aprender. Por supuesto, hay muchos principios de implementación y patrones de diseño de diagramas de carrusel. De lo que estoy hablando aquí es implementarlos utilizando la programación funcional orientada al proceso. En comparación con los patrones de diseño orientados a objetos, el código inevitablemente aparecerá hinchado y redundante. Pero la falta de abstracción orientada a objetos es muy adecuada para que los novatos lo entiendan y aprendan. Los estudiantes que ya están en bate esperan arrojar menos. También puedes dar más sugerencias.
El principio del diagrama de carrusel:
Una serie de imágenes de tamaños iguales están en azulejos, utilizando el diseño CSS para mostrar solo una imagen, y el resto está oculto. La reproducción automática se logra calculando el desplazamiento usando el temporizador o cambiando imágenes haciendo clic manualmente en los eventos.
Diseño HTML
Primero, el contenedor principal almacena todos los contenidos, y la lista de contenedores infantiles contiene imágenes. Botones del subcontainer de almacenamiento de botones de almacenamiento.
<div id="container"> <div id="list" style="left: -600px;"> <img src="img/5.jpg" /> <img src="img/1.jpg" /> <img src="img/2.jpg" /> <img src="img/2.jpg" /> <img src="img/3.jpg" /> <img src = "img/4.jpg"/> <img src = "img/5.jpg"/> <img src = "img/1.jpg"/> </div> <div it = "buttons"> <span index = "1"> </span span> <plain index = "2"> </span> <span índice = "</</</</</</</span <span index = "4"> </span> <span index = "5"> </span> </div> <a href = "javascript :;" id = "anterior"> <</a> <a href = "javascript :;" id = "Next" >> </a> </div>
Optimizar el desplazamiento sin costuras.
Cuando cambia de la última imagen a la primera imagen, hay un gran espacio y usa dos imágenes auxiliares para llenar este vacío.
Aquí hay un desplazamiento sin problemas, mire el código directamente, copie la última imagen antes de colocar la primera imagen y copie la primera imagen detrás de la última imagen. Y, oculte la primera imagen auxiliar de imagen (en realidad la quinta imagen que realmente se muestra, así que establezca estilo = "izquierda: -600px;")
Modificación de CSS
1. Modelo de comprensión del cuadro, flujo de documentos y problemas de posicionamiento absoluto.
2. Presta atención al desbordamiento: oculto de la lista; Solo muestre una imagen de la ventana y esconde los lados izquierdo y derecho.
3. Asegúrese de que cada capa de tramo en los botones esté cubierta y configure la más alta. (índice z: 999)
* {margen: 0; relleno: 0; decoración de texto: ninguno;} cuerpo {relleno: 20px;}#contenedor {ancho: 600px; altura: 400px; border: 3px sólido#333; desbordamiento: hidden; posición: relativo;}#list {width: 4200px; altura: 400px; posicion: absoluta; {ancho: 600px; altura: 400px; float: izquierda;}#botones {posición: absoluto; altura: 10px; ancho: 100px; z-index: 2; fondo: 20px; izquierda: 250px;}#botones de botones {cursor: puntero; float: float; border: 1px sólido #fff; wid: 10px; 10px: 10px: border r: border: border: border; 50%; fondo: #333; margen-derecha: 5px;} #botones .on {fondo: orangered;}. Arrow {cursor: pointer; display: none; line-height: 39px; text-align: font-size: 36px; font-weight: negr; whish: 40px; altura: 40px; posicion: absoluto; Z-INDEX: 2; 2; Top; 180px; Color de fondo: RGBA (0, 0, 0, .3); color: #fff;}. Arrow: Hover {Background-Color: RGBA (0, 0, 0, .7);}#Container: Hover .Rarw {Display: Block;}#previo {Izquierda: 20px;}#Next {Right: 20px;}Js
Primero, primero nos damos cuenta del efecto de hacer clic manualmente en las flechas izquierda y derecha para cambiar la imagen:
Window.Onload = function () {var list = document.getElementById ('list'); var prev = document.getElementById ('previo'); var next = document.getElementById ('next'); function animate (offset) {// lo que se obtiene es style.left, que es la distancia para obtener relativo a la izquierda, así que después de la primera imagen, styleft es todo lo negativo, /// para ser redondeado con parseInt () para convertirlo en un número. var newleft = parseInt (list.style.left) + offset; list.style.left = newleft + 'px';} anteriorDespués de ejecutar, encontraremos que si sigue haciendo clic en la flecha derecha, habrá un blanco y no puede volver a la primera imagen. Haga clic en la flecha izquierda para volver a la primera imagen.
Usando Google Chrome F12, la razón es que usamos el desplazamiento a la izquierda para obtener la imagen. Cuando vemos que el valor izquierdo es inferior a 3600, habrá en blanco si no hay octava imagen, por lo que debemos juzgar el desplazamiento aquí.
Agregue este párrafo a la función animada:
if (newleft <-3000) {list.style.left = -600 + 'px';} if (newleft> -600) {list.style.left = -3000 + 'px';}Ok, ejecutarlo, no hay problema. Las imágenes del carrusel, como su nombre lo indica, son imágenes que puedes mover. En este momento, necesitamos usar el temporizador de objetos incorporado del navegador.
Para los temporizadores, es necesario explicar la diferencia entre SetInterval () y SetTimeOut. En pocas palabras, SetInterval () se ejecuta varias veces, y SetTimeOut () se ejecuta solo una vez.
Para un uso más específico, puede hacer clic en el enlace para ver la diferencia: Windows.setInterval Window.setTimeout.
Aquí usamos setInterval () porque nuestra imagen debe desplazarse. Insertar a continuación
VAR Timer; function Play () {timer = setInterval (function () {preval.onclick ()}, 1500)} play ();¡Corre, ok!
Sin embargo, cuando queremos mirar cuidadosamente una determinada imagen, debemos detener la imagen y podemos limpiar el temporizador. Este método se usa aquí.
Aquí, necesitamos operar en su DOM y necesitamos obtener toda el área del mapa de carrusel;
var contenedor = document.getElementById ('Container'); function stop () {ClearInterval (Timer);} Container.onMouseOver = stop; Container.OnMouseOut = Play;Pero aquí, una imagen de carrusel se ha completado básicamente, y algunos estudiantes preguntarán, por lo que es muy simple. ¿Viste la fila de puntos pequeños debajo de la imagen? Te he agregado características.
--------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------
Aquí está la versión actualizada:
var buttons = document.getElementById ('botones'). La matriz comienza desde 0, por lo que el índice necesita -1buttons [index -1] .classname = 'on';} prev.onclick = function () {index -= 1; if (index <1) {index = 5;} ButtonsShow (); Animate (600);} next.OnClick = function () {/// Solo tenemos 5 puntos pequeños, por lo que necesitamos hacer un índice de juicio += 1; if (índice> 5) {index = 1;} buttonsshow (); animate (-600);}Parece mucho más normal ahora, pero queremos hacer clic en uno de los puntos pequeños en cualquier momento con el mouse y cambiar a la imagen correspondiente. El mismo principio es que todavía necesitamos encontrar la imagen correspondiente a través del desplazamiento.
for (var i = 0; i <button.length; i ++) {botones [i] .Onclick = function () {// optimizar, haga clic en el punto actual en la imagen actual y no ejecute el siguiente código. if (this.classname == "on") {return;}/* offset get: aquí obtiene la posición donde el mouse se mueve al punto, use esto para unir el índice a los botones de objeto [i], vaya a google este uso* //* ya que el índice aquí es un atributo personalizado, debe usar el método DOM2-LEVEL getTribe () para obtener el atributo de la atributo de la atributo de la variedad*/var. parseInt (this.getAttribute ('index')); var offset = 600 * (clickIndex - index); animate (offset); // almacenamiento de la posición después del clic del mouse y úsela para mostrar los puntos como índice normal = clickindex; botutonsshow ();}}}Todos, pueden haber descubierto que esta imagen de carrusel es un poco extraña e impredecible. Cambia a la izquierda, así que reescribirlo:
function play () {// cambia la imagen de carrusel para cambiar la imagen al temporizador derecho = setInterval (function () {next.onClick ();}, 2000)} <! DocType html> <html> <Head> <Meta Charset = "Utf-8"> <title> </title> <style type = "text/css">****** {margin: 0; n; n; n;; 0; Decoración de texto: Ninguno;} Body {Padding: 20px;}#Container {Width: 600px; Height: 400px; Border: 3px Solid#333; Overflow: Hidden; Position: Relative;}#List {width: 4200px; altura: 400px; posición: absoluto; Z-Index: 1;}#list IMg {IMG { 600px; altura: 400px; float: izquierda;}#botones {posición: absoluto; altura: 10px; ancho: 100px; z-index: 2; fondo: 20px; izquierda: 250px;}#buttones span {cursor: pointer; float: float: izquierda; borde: 1px sólido #ffff; width: 10px; altura; 10px; 10px: border radius: 50%de borde: 50%: 50%de borde: 50%: 50%de borde: 50%: 50%de borde: 50%: 50%de borde: 50%: 50%de borde: 50%: 50%de borde: 50%: 50%de borde: 50%: 50%de borde: 50%: 50%: 50%de borde: 50%: Border; #333; margen-derrota: 5px;} #botones .on {fondos: orangered;}. Arrow {cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; altura: 40px; posición: absoluta; z-inex: 2; 180px; fondos; en negrita; width: 40px; altura: 40px; posición: absoluta; z-intex: 2; 180px; font-worthin; Rgba (0, 0, 0, .3); color: #ffff;}. Arrow: Hover {Background-Color: Rgba (0, 0, 0, .7);}#Container: Hover .Rarw {display: block;}#previo {izquierda: 20px;}#Next {Right: 20px;} </script type = "Text/javaScript" use*//*dom Event*//*timer*/window.onload = function () {var contenedor = document.getElementById ('Container'); var list = document.getElementById ('list'); var buttons = document.getElementById ('Bottons'. document.getElementById ('next'); var index = 1; var temporizador; function animate (offset) {// lo que se obtiene es style.left, que es la distancia para ser relativa a la izquierda, por lo que después de la primera imagen, style.left es todo negativo, // y style.left es una cadena, que debe ser redondeada con parwein () para convertirlo en un número. var newleft = parseInt (list.style.left) + offset; list.style.left = newleft + 'px'; // Infinite Scrolling Judgy if (newleft> -600) {list.style.left = -3000 + 'px';} if (newleft <-3000) {list.style.left = -600 + 'px';}; {// timer de ejecución repetida = setInterval (function () {next.onClick ();}, 2000)} function stop () {clearVal (timer);} function butsShow () {// claro el estilo del pequeño punto anterior para (var i = 0; i <buttons.length; i ++) {if (butss [i] .clasname) {botones [i] .classname = "";}} // La matriz comienza desde 0, por lo que el índice necesita -1buttons [index -1] .classname = "on";} prev.onclick = function () {index -= 1; if (index <1) {index = 5} buttonsshow (); animate (600);}; next. Del temporizador anterior, el índice continuará aumentando. Solo tenemos 5 puntos pequeños, por lo que necesitamos hacer un índice de juicio+= 1; if (index> 5) {index = 1} animate (-600); BotonsShow ();}; for (var i = 0; i <button.length; i ++) {botones [i] .onclick = function () {// óptima, haga clic en el pequeño dot actual en la imagen actual y no lo do no do-do-do-do-do-do-do-do-do-doe. if (this.classname == "on") {return;}/* Aquí obtenemos la posición donde el mouse se mueve al punto, use esto para unir el índice a los botones de objeto [i], vaya a Google este uso* //* Dado que el índice aquí es un atributo personalizado, debe usar el método DOM2-Level GetTribe () para obtener el atributo personalizado del índice personalizado*/Var Clickinx = parseInt (this.getAttribute ('index')); var offset = 600 * (clickIndex - index); // Este índice es indexanimate (compensación); index = clickindex; // almacenamiento de la posición después del clic del mouse y úsela para mostrar las dotsshow ();}} contenedor.onmouseover = stop; Container.onmouseOut = Play; Play ();} </script> </head> <body> <Div Id = "Container"> <Div Id = "List" Style = "Left: -600px;"> <img src = "IMg/5.jpg/5.jpg" src = "img/1.jpg"/> <img src = "img/2.jpg"/> <img src = "img/3.jpg"/> <img src = "img/4.jpg"/> <img src = "img/5.jpg"/> <img src = "img/5.pg"/<img src = "img/2.jpg"/> <img src = "img/3.jpg"/> <img src = "img/4.jpg"/> <img src = "img/5.jpg"/> <img src = "img/1.jpg"/> </div> <divi = "douton index = "2"> </span> <span index = "3"> </span> <span index = "4"> </span> <span index = "5"> </span> </div> <a href = "javascript :;" id = "anterior"> </a> <a href = "javascript :;" id = "Next" >> </a> </div> </body> </html>Lo anterior es el simple código JS Carousel que le presenta el editor. 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!