Este ejemplo proporciona un análisis exhaustivo del uso de carrusel en Bootstrap para su referencia. El contenido específico es el siguiente
Archivo del código fuente:
Carrusel.scss
Carrusel.js
Principio de implementación:
Ocultar todos los elementos que se mostrarán y luego especifique que el bloque actual se exhibirá, se adapta el ancho y la altura
Análisis del código fuente:
1. Estructura HTML: dividida principalmente en cuatro partes
1.1. Container: el DIV más externo requiere un ride de datos = "Carousel" para especificar como un complemento de reproducción de la rueda, y proporciona una ID para facilitar la asociación del indicador del círculo.
1.2. La parte de la lista de imágenes está envuelta con un DIV exterior, y luego cada IMG se envolverá con un DIV, y la clase está envuelta por el artículo.
1.3. Indicador de círculo: use una lista OL para mostrar sus elementos de lista gráfica. Cada elemento de la lista debe especificar el atributo Data-Slide-To = "índice", que se utiliza para marcar el número de índice del círculo actual.
1.4. Botones de control izquierdo e izquierdo: realice la función de moverse a la izquierda y a la derecha
2. Estilo CSS
2.1. Carrusel: solo hay una marca de posicionamiento relativo
2.2. Carusel-Inner: gire el área de la lista de imágenes, donde cada elemento tiene un elemento para modificarlo
2.2.1. Activo, siguiente y previo se consideran visibles.
2.2.2. Captación de carrusel: significa que cada elemento debe tener información de título y se muestra la posición predeterminada.
2.3. Carrusel-Control: establece el estilo de los botones izquierdo y derecho, que establecerá información como gradiente y transparencia. Proporciona dos estilos adicionales: icon-prev e icon-next.
2.4. Indicadores de carrusel: el estilo de la parte del círculo está absolutamente posicionado. Cada Li se establece como un elemento de bloque en línea. Use texto-indente: -999 para ocultar la fuente.
3. Código JS
3.1. El método principal principal es la diapositiva, que realiza el cambio de imágenes
3.1.1. Cuando el interruptor de imagen se realiza por primera vez, se llamará al método de pausa para establecer tentativamente el temporizador. Solo después de completar el interruptor de imagen se llamará al método de ciclo para habilitar el temporizador.
3.1.2. Aceptó dos parámetros: tipo y siguiente
3.1.2.1. Tipo: significa cambiar las páginas hacia arriba o hacia abajo
3.1.2.2. Siguiente: esta vez se muestra como el elemento activo. Si no se pasa, debe usar el método GetItemfordirection para obtenerlo.
3.1.3. Obtenga parámetros básicos como $ activo (actualmente elemento activo), $ siguiente (elemento que debe ser un elemento activo), iScycling (mango del temporizador para carrusel de temporizador), dirección (dirección) y otros parámetros básicos
3.1.4, luego active el evento Slide.BS.Carousel
3.1.5. Luego establezca el elemento de índice de indicadores
3.1.6. Cambiar imágenes. Si admite la animación CSS, use la animación para cambiar. De lo contrario, agregue CSS directamente a Switch.
3.1.7. Principio de conmutación de animación:
3.1.7.1. Anterior: es un estilo que se combinará desplazando la imagen a la derecha: derecho activo (elemento activo) anterior a la derecha (siguiente elemento). En este momento, la previa es -100%, ponga la imagen a la izquierda más
3.1.7.2. SIGUIENTE: Desplácese la imagen hacia la izquierda y la próxima izquierda (siguiente elemento). En este momento, a continuación es el 100%, ponga la imagen a la derecha.
3.1.7.3. A la derecha activa: la imagen debe ser a la derecha, por lo que debe mover el 100% del ancho de la imagen.
3.1.7.4. A la izquierda activa: la imagen está a la izquierda, entonces el ancho de la imagen debe ejecutarse -100%
3.1.7.5. Imagen comparativa:
3.1.8. Código de implementación (excluyendo CSS3):
.carusel-inner> .active, .carusel-inner> .next, .carusel-inner> .prev {display: block;}. Carousel-inner> .Active {izquierda: 0;}. Carousel-inner> .next, .Carousel-Inner> .prev {posicion: absoluta; arriba: 0; Ancho: 100%;}. Carousel-Inner> .next {izquierda: 100%;}. Carousel-Inner> .prev {izquierda: -100%;}. Carousel-Inner> .next.left, .Carousel-Inner> .prev.rright {Left: 0;}. Carousel-Inner> .Active.left {izquierda: --100%;}. .active.right {izquierda: 100%;}Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Maravilloso intercambio de temas: jQuery Picture Carousel JavaScript Picture Carousel Bootstrap Picture Carousel
Lo anterior se trata de este artículo, espero que sea útil para todos aprender la programación de JavaScript.