Yo mismo he escrito tres carruseles de imágenes. Uno se implementa en JS nativo simple y no tiene efectos de animación. El otro se implementa en combinación con jQuery y se entre y sale. Ahora quiero hacer uno más genial en mi blog o sitio web personal, y puedo mostrar mis propios trabajos en ese momento. Después de un tiempo de compras en MOOC, descubrí que había un curso de complemento jQuery de carrusel, que era un poco genial, así que pensé en encapsularlo en JS nativo. Solo después de hacerlo, no era tan fácil como pensaba. . . No hablemos más de eso, explicemos el proceso de implementación.
2. Efecto
Porque mi servidor aún no se ha instalado. No hay demostración en línea (Orz ...), por lo que solo puedo poner una representación.
El efecto aproximado aún se puede ver en las fotos, por lo que no diré mucho. Si desea ver el efecto del código real, bienvenido a mi código de descarga de GitHub. No olvides darme una estrella en mi proyecto Github^_^
Iii. Proceso de implementación
estructura html
<div dataSetting = '{"ancho": 1000, "altura": 400, "CarrouselWidth": 750, "Carrouselheight": 400, "escala": 0.9, "VerticalAlign": "Middle"}'> <div> </div> <ul> <li> <a href = "#"> <img src = "IMG/1.Jpg" <li> <a href="#"><img src="img/2.jpg"></a> </li> <li> <a href="#"><img src="img/2.jpg"></a> </li> <li> <a href="#"><img src="img/3.jpg"></a> </li> <li> <a href = "#"> <img src = "img/4.jpg"> </a> </li> <li> <a href = "#"> <img src = "img/5.jpg"> </a> </ul> <div> </div> </div>Esta estructura es la misma que la estructura del código HTML de los carruseles generales. La ligera diferencia es que hay una propiedad de fijación de datos en el DIV principal del carrusel, que contiene algunos parámetros de efectos de carrusel. La importancia específica de los parámetros se explicará más adelante.
El código para la parte CSS no se publicará. Lo más importante es prestar atención al posicionamiento absoluto de los elementos. Como se puede ver en las representaciones, la posición y el tamaño de cada imagen son diferentes, por lo que se controlan a través de JS, por lo que se requiere una posición absoluta. Centrémonos en el proceso de implementación de JS.
Proceso de implementación de JS
Hablemos de algunos pasos clave en JS. Después de hacer estos pasos, no debería haber dificultades.
① parámetros de defecto
Dado que es un complemento de paquete, definitivamente habrá algunos valores predeterminados para parámetros que deben configurarse. En este complemento, los siguientes parámetros son principalmente:
Ancho: 1000, // ancho del área de diapositivas
Altura: 400, // La altura del área de la diapositiva
Carrouselwidth: 700, // ancho del primer cuadro de la diapositiva
Carrouselheight: 400, // La altura del primer cuadro de la diapositiva
Escala: 0.9, // Registre la relación de escala, por ejemplo, cuánto ancho y altura de la segunda imagen son más pequeñas que la de la primera imagen cuando se muestra.
Autoplay: verdadero, // ¿Se reproduce automáticamente?
Timespan: 3000, // intervalo de tiempo de juego automático
VerticalAlign: 'Middle' // Alineación de imágenes, hay tres maneras: superior/medio/fondo, el valor predeterminado es medio
②encapsular el objeto
Debido a que un sitio web puede usar el mismo complemento de carrusel en varios lugares, el embalaje es crítico. Después de definir este objeto, si define un método de inicialización para el objeto, puede crear múltiples objetos. Solo necesita pasar el mismo DOM de todas las clases en él. Entonces, mi método de inicialización es el siguiente:
Carousel.init = function (carrusels) {var _this = this; // convertir nodelist a matriz var cals = toArray (carrusels); <br> /*Debido a que JS nativo obtiene todas las clases, lo que obtienes es un nodelista, que es una matriz de clases. Si desea usar un método de matriz, debe convertirlo en una matriz real. Aquí ToArray es el método de conversión. */ cals.ForEach (function (item, index, array) {new _this (item);}); }De esta manera, cuando estoy en Window.onload, llamo a Carrousel.init (document.querySelectorall ('. Carrousel-Main')); ¡De esta manera puedo crear múltiples carruseles!
③Enistializar los parámetros de posición del primer cuadro
Debido a que los parámetros relevantes de todos los cuadros después del primer cuadro se definen con referencia al primer cuadro, es importante definir bien el primer cuadro.
setValue: function () {this.Carrousel.style.width = this.settings.width+'px'; this.carrousel.style.height = this.settings.height+'px'; /*Configuración del botón izquierdo e izquierdo, aquí, el área después de que los botones izquierdo y derecho se restan del ancho del primer cuadro. El índice Z es más alto que todas las imágenes, excepto el primer cuadro, y las imágenes se colocan a la izquierda y a la derecha, por lo que el valor del índice Z es la mitad del número de imágenes. */ var btnw = (this.settings.width-this.settings.CarrouselWidth)/ 2; this.prebtn.style.width = btnw+'px'; this.prebtn.style.height = this.settings.height+'px'; this.prebtn.style.zindex = Math.ceil (this.CarrousElitems.length/2); this.nextbtn.style.width = btnw+'px'; this.nextbtn.style.height = this.settings.height+'px'; this.nextbtn.style.zindex = Math.ceil (this.CarrousElitems.length/2); // la primera configuración relacionada con el cuadro esto.CarrousEffir.style.left = btnw+'px'; this.CarrousEffir.style.top = this.setCarrousElLign (this.settings.CarrousElheight)+'Px'; this.CarrousEffir.Style.Width = this.settings.CarrouselWidth+'Px'; this.CarrousEffir.Style.Height = this.settings.Carrouselheight+'PX'; this.CarrousEffir.style.zindex = Math.floor (this.CarrousElitems.length/2);},Aquí, cuando se usa el nuevo objeto, vaya al nodo DOM para obtener los parámetros de establecimiento de datos y luego actualice la configuración de parámetros predeterminada. Hay un lugar para tener en cuenta aquí. No puede actualizar directamente los parámetros predeterminados asignando valores al obtener los parámetros, porque cuando los usuarios configuran los parámetros, todos los parámetros pueden no estar configurados una vez. Si el valor se asigna directamente y el usuario se configura, los parámetros se perderán. Aquí escribí un método de extensión de objeto similar al método $ .extend en jQuery para actualizar los parámetros. No enumeraré los detalles, si está interesado, puede descargarlos.
④ Otro Configuración de ubicación de imagen
La imagen aquí es en realidad la imagen, excepto que la primera se divide en dos imágenes izquierda y derecha, y la posición de la imagen a la izquierda y la de la derecha es diferente, por lo que debe configurarse por separado:
// Establezca la relación posicional de la imagen en la derecha var rightIndex = nivel; RightsLice.ForEach (function (item, index, array) {rightIndex--; var i = index; rw = rw*carruselself.settings.scale; // la imagen en la derecha es gradualmente más pequeña según la razón de escala rh*r*carrouselsetSet.settings.scale; style.style.zindex; El índice z a la derecha es más pequeño, y el número de imágenes puede disminuir gradualmente usando el número general de imágenes item.style.width = rw+'px'; Aquí está: reste el primer ancho de cuadro, divida 2, y luego divida el número de imágenes en el elemento izquierdo o derecho.style.left = (Condoffset+(++ index)*Gap-rw)+'Px'; // El valor de la izquierda es en realidad la izquierda del primer cuadro+el ancho del primer cuadro+el espacio de la espacios del elemento mínimo del elemento del elemento item.style.top = CarrouselSelf.setCarRousElalign (rh)+'px';});El método de configuración a la izquierda es similar y más simple, por lo que no entraré en detalles.
⑤ Ajuste el tamaño de posición de todas las imágenes durante la rotación
Este paso es muy importante. Haga clic en el siguiente en el botón derecho es la rotación izquierda, y hacer clic en el anterior en el botón izquierdo es la rotación derecha. En este momento, solo necesitamos considerar todas las imágenes como un anillo, hacer clic una vez, cambiar la posición y completar la rotación. Específicamente, cuando se gira la rotación izquierda, haga que los parámetros de la segunda imagen sean iguales a la primera imagen, la tercera imagen es igual a la segunda imagen ... y la última imagen igual a la primera imagen. Al girar a la derecha, haga que el parámetro de la primera imagen sea igual a la segunda imagen, el parámetro de la segunda imagen es igual a la tercera imagen ... y el parámetro de la última imagen es igual a la primera imagen.
Hablemos de la rotación izquierda aquí
if (dir == 'left') {toArray (this.CarRousElItems) .forEach (function (item, index, array) {var pre; if (index == 0) {// juzga si es el primer pre = _This.CarRousEllat; // Guardar el primer pre -igual a la última vAR width = pre.OffetSetTh zIndex=pre.style.zIndex; var opa=pre.style.opacity; var top=pre.style.top; var left=pre.style.left; }else{ var width = tempWidth; var height = tempHeight; var zIndex = tempZIndex; var opa = tempOpacity; var top = tempTop; var left = tempLeft; } //Note here, because the second picture refers to La primera imagen, y al cambiar de esta manera, la primera imagen se cambia primero, los parámetros relevantes de la primera imagen deben guardarse temporalmente. item.style.width = ancho+'px'; });});}La rotación aquí parecerá rígida si no usa algunas animaciones demasiado. Pero Native JS no tiene funciones animadas, aquí yo mismo escribí una función de animación imitada. El principio es obtener el valor de estilo original del DOM y compararlo con el valor recién aprobado. Use algunos métodos para definir una velocidad. Mi velocidad aquí es dividir la diferencia de 18. Sin embargo, defina un temporizador y consulte el intervalo de tiempo en el código fuente jQuery para ejecutar cada 13 milisegundos. Luego, el temporizador está claro cada vez que se agrega el valor de estilo original al valor entrante. Para más detalles, consulte aquí.
De acuerdo, los puntos clave son casi los mismos, ¡y debería ser fácil si comprende estos procesos!
4. Resumen y reflexión
Resumir:
Personalmente, creo que este es un complemento relativamente fácil de entender. Sería bastante simple hacerlo en combinación con jQuery. Sin embargo, si escribe desde el original, todavía se siente un poco menos suave. Debe ser que las animaciones personalizadas no son tan buenas como las animaciones encapsuladas por jQuery.
Además, debido a que las imágenes deben dividirse por igual en ambos lados de los lados izquierdo y derecho, incluso para un número de imágenes, el método utilizado aquí es clonar la primera imagen, luego agregarla al final y formar un número impar.
pensar:
Si hay un error, significa que defino un indicador de Flag Rotate para determinar si puede girar en este momento, lo que es para evitar que se mantenga al día con el clic rápido. Cuando presioné, configuré RotateFlag en falso y luego configuré RotateFlag en True después de que terminó la animación, pero parece que el efecto no es obvio. Espero que los maestros relevantes puedan darme algunos consejos y todos avanzarán juntos.
Lo anterior es todo el contenido de este artículo. Para obtener más contenido, consulte: Resumen de JavaScript Picture Carousel Effects. Gracias por tu lectura.