Echemos un vistazo al efecto de carrusel de la imagen de bootstrap:
Lo anterior es el efecto compartido por todos, pero esta es la página de inicio de la música en la nube de NetEase.
Recuerde aparecer por primera vez en la biblioteca de control oficial de iOS7, y Android también agregó esta vista a una determinada versión. El diseño es universal ... Bootstrap3 también admite el uso de tales efectos en la web.
A continuación, un análisis simple:
1. Análisis estructural
Una imagen de carrusel incluye principalmente tres partes:
☑ Fotos de carrusel
☑ Contador para fotos de carrusel
☑ El controlador de imágenes de carrusel
Paso 1: Diseñe el contenedor para imágenes de carrusel. El estilo del carrusel se adopta en el marco Bootstrap, y se define un valor de ID para este contenedor, de modo que el atributo de datos se utiliza para declarar el desencadenante más adelante.
Copie el código de la siguiente manera: <div id = "slidershow"> </div>
Paso 2: Diseñe un mostrador de imágenes de carrusel. Agregue una calculadora de imágenes de carrusel dentro del contenedor div.carusel, utilizando el estilo de los indicadores de carrusel. Su función principal es mostrar el orden de reproducción de la imagen actual (hay varias imágenes, y las siguientes son las mismas listas generalmente se usan para hacerlo:
<div id = "slidershow"> <!-Establezca el orden de los carrusels de la imagen-> <ol> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </ol> </div>
Paso 3: Diseñe el área de reproducción de imágenes de carrusel. En todo el efecto de la imagen del carrusel, el área de reproducción es el área más crítica, que se usa principalmente para colocar imágenes que necesitan ser acariciadas. Esta área se controla utilizando el estilo-interno de carrusel, y también se coloca en el recipiente del carrusel, y cada imagen del carrusel se coloca a través del contenedor del elemento:
<div id = "slidershow"> <!-Establezca el orden de los carrusels de imagen-> <ol> <li> 1 </li> ... </ol> <!-Establezca las imágenes de Carousel-> <div> <a href = "##"> <img src = "http://images3.c-ctrip.com/rk/201407/ll580x1455.jpg" </div> <div> <a href = "##"> <img src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> </a> </div> ... <div> <a href = "##"> <img src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> </a> </div> ... <div> <a href = "##"> <img src = "http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg"> </a> </div> </div> </div>
Paso 4: Establezca la descripción de la imagen del carrusel. Muchos efectos de imagen de carrusel también tienen su propio título y contenido de descripción en cada imagen. De hecho, el carrusel en el marco Bootstrap también proporciona efectos similares. Simplemente agregue el código correspondiente en la parte inferior de la imagen en el elemento.
<div id = "slidershow"> <!-Establezca el orden de los carrusels de la imagen-> <ol> <li> 1 </li> ... </ol> <!-Establezca las imágenes del carrusel-> <div> <a href = "##"> <img src = "http://images3.c-ctrip.com/rk/201407/ll580x1455.jpg" <!-Imagen Título y Contenido de descripción correspondiente-> <div> <h3> Título de la imagen </h3> <p> Contenido de descripción ... </p> </div> </div>… </div> </div>
Paso 5: Diseñe el controlador de imágenes de carrusel. Muchas veces las imágenes de carrusel también tienen un controlador que juega hacia adelante y hacia atrás. En el carrusel, se logra combinando izquierda y derecha con estilo de control de carrusel. Donde a la izquierda significa reproducción hacia adelante, la derecha significa reproducción hacia atrás. También se coloca en el contenedor de carrusel:
<div id = "slidershow"> <!-Establezca el orden de los carrusels de la imagen-> <ol> ... </ol> <!-Establezca las imágenes de Carousel-> <div> ... </div> <!-Establezca el controlador de imágenes de Carousel-> <a href = ""> <span> </span> </a> <a href = "> <span> </span> </a> </siv> </diviv>
2. Proceso de implementación
<div id = "Carusel-Example-Generic" Data-Ride = "Carousel"> <!-Indicadores-> <ol> <li Data-Target = "#Carousel-Example-Generic" Data-Slide-To = "0"> </li> <li Data-Target = "#Carousel-Expleamper-Genérico" data-Target = "#Carousel-Example-Genérico" data-slide-to = "2"> </li> </ol> <!-Wrapper para diapositivas-> <Div role = "listbox"> <div> <img src = "..."> <div> ... </piv> </div> <div> <img src = "..."> "div> ;
Dividido en tres partes
1. Indicador
Una parte es el pequeño punto a continuación ... es el indicador
La clase OL se usa para crear este indicador
Cada atributo Data-Slide-To = "0" se utiliza para guiar la ubicación para definir el estado de activación predeterminado.
artículo
<Viv> <img src = "..."> <div> <h3> ... </h3> <p> ... </p> </div> </div>
No hay suspenso, solo complete el título y el contenido de la imagen.
2. Controladores de izquierda e izquierda
El código es el siguiente
<a href = "#myCarousel" role = "Button" data-slide = "anterior"> <span aria-hidden = "true"> </span> <span> anterior </span> </a> <a href = "#myCarousel" role = "botón" Botón "Data-slide =" Next "> <span aria-hidden =" true "> </span> <span> next </span </span </aa>" next "
Operación en JavaScript
inicialización
$ ('. Carousel'). Carousel ({Intervalo: 2000})Llevar a cabo un bucle
.Carusel ('ciclo')
pausa
.Carusel ('Pausa')
El posicionamiento de un elemento específico comienza desde 0
.Carusel (número)
El anterior
.Carusel ('previo')
Próximo
.Carusel ('Siguiente')
También se puede encontrar más contenido sobre Bootstrap en temas especiales: "Tutorial de aprendizaje de bootstrap"
Lo anterior es una introducción detallada al carrusel de la imagen JavaScript. Espero que este artículo sea útil para todos en el aprendizaje de la programación de JavaScript.