El efecto de la imagen del carrusel se puede ver en la web, y muchas personas también lo llaman presentación de diapositivas. El efecto principal de la pantalla es jugar múltiples imágenes en un ciclo, jugando de derecha a izquierda. Jugarlo se detendrá cuando el mouse se cierne sobre la imagen. Si el mouse se cierne o hace clic en el punto en la esquina inferior derecha, se mostrará la imagen correspondiente.
Este efecto de carrusel de imagen se implementa en el marco Bootstrap a través del complemento de Carousel
Captura de pantalla del efecto de demostración:
Código:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <!-<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/csss/bootstrap.min.css">-> <link rel = "" stylesheet " href = "css/bootstrap.min.css"/> <style> cuerpo {relleno: 10px; margin: 10px;} </style> </head> <body> <div id = "myCarousel"> <!-Paso 1: Diseñadores para imágenes de acerousel. -> <!-#Slidershow La capa agrega estilo de diapositiva y usa imágenes e imágenes para cambiar los efectos para que sea suave-> <ol> <!-Paso 2: Diseñe un mostrador de imágenes de carrusel. -> <li data-Target = "#myCarousel" data-slide-to = "0"> </li> <li data-target = "#mycarousel" data-slide-to = "1"> </li> <li data-Target = "#mycarousel" data-slide-to = "2"> </li> </ ol> <Div> <!-Paso 3: Paso 3: la imagen de la imagen de Carousel " Estilo de Carrusel-Inner para controlar-> <div> <img src = "http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"> <div> <h4> Título 1 </h4> <p> Imagen 1 </p> </div> <div> <img src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> <div> <h4> title 2/h4> <p> Image 2 </p> </div> <div> <img src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> <div> <h4> title 2/h4> <p> Image 2 </p> </div> <div> <img src = "http://images3.c-ctrip.com/rk/201403/yfdd580145a.png"> <div> <h4> Título tres </h4> <p> Introducción al contenido de la imagen tres </p> </div> </div> <!-Paso 4: Design a Carousel Picture Controler. Reproduce el control de carrusel izquierdo hacia adelante y el controlador que reproduce hacia atrás-> <a href = "#myCarousel" data-slide = "anterior"> ‹<!-<a href = "#slidershow" roly = "button" data-slide = "">-> <span> </span> </a> <a href = "#myCarousel" "previsel" previo "previo" data-slide = "next" >› <span> </span> <!-<a href = "#Carousel-exame-Generic" data-slide = "anterior"> <span> </span> </a> <a href = "#Carousel-exame-generic" data-slide = "next"> <span> </span> </a>-> </div> <script> $ ('. Carousel'). Carousel () </script> <script type = "text/javaScript" src = "js/jQuery.min.js"> </script> <script type = "text/javaScript" src = "js/bootstrap.min.js"> </script> <!-<script src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"> </script>-> <!-<script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>-> </body> </html> /*bootstrap.css File Line 5835 a la línea 5863*/. CAROULEL-INDICATRATORES {POSICIÓN: Absolte; /*Posicionamiento absoluto de toda el área de conteo*/Bottom: 10px; /*10px desde la parte inferior del recipiente carrusel*/z-índice: 15; /*Establezca su nivel en el eje z*//*Centre todo el área de conteo en el nivel*/izquierda: 50%; ancho: 60%; relleno-izquierda: 0; margen-izquierda: -30%; text-align: centro; list-style: none;}. Carousel-indicators li {display: inline-block; ancho: 10px; altura: 10px; margen: 1px; carousel-indicator -999px; cursor: puntero; color de fondo: #000/9; color de fondo: rgba (0, 0, 0, 0); borde: 1px sólido #fff; border-radius: 10px;}/*Establecer el estilo de estado actual*/. Carousel-indicators. Active {width: 12px; altura: 12px; margen: 0; fondo de fondo: #ff; #ff;Carusel de imagen: juego de carrusel táctil declarativo
Hay dos formas de activar el diagrama del carrusel, uno es declarativo y el otro es JavaScript. Primero, veamos el método declarativo.
El método declarativo se implementa definiendo el atributo de datos, que puede controlar fácilmente la posición del carrusel. Incluye principalmente los siguientes tipos:
• Propiedad de ride de datos: tome el valor de carrusel y defina en carrusel.
• Propiedad de datos de datos: tome el nombre de ID u otro identificador de estilo definido por el carrusel de valor. Como se muestra en el ejemplo anterior, tome el valor "#Slidershow" y defina en cada LI del mostrador de carrusel.
• Atributo de deslizamiento de datos: los valores incluyen anterior, siguiente, previamente significa desplazarse hacia atrás, y el siguiente significa desplazarse hacia adelante. Este valor de propiedad también se define en el enlace A del controlador del carrusel, y el valor HREF del controlador se establece en el nombre de ID u otro identificador de estilo del carrusel del contenedor.
• Atributo de deslizamiento de datos: se usa para pasar el subíndice de una determinada marco, como Data-Slide-To = "2", que puede redirigirse directamente a este marco especificado (el subíndice comienza desde 0), y también se define en cada LI del mostrador del carrusel.
Además de Data-Ride = "Carousel", Data-Slide y Data-Slide-To, el componente Carousel también admite otras tres propiedades personalizadas:
| Nombre de atributo | tipo | valor predeterminado | describir |
| intervalo de datos | número | 5000 | Tiempo de espera (milisegundos) para la rotación de diapositivas. Si False, el carrusel no comenzará el bucle automáticamente |
| pausa de datos | cadena | flotar | El mouse predeterminado se suspende en el área de diapositivas y la reproducción comenzará cuando se vaya. |
| mazo de datos | Valor booleano | verdadero | Es el bucle continuo de carrusel |
El siguiente código implementa "el carrusel no se enrolla continuamente" y "el intervalo de tiempo del carrusel es de 1 segundo".
<div id = "slidershow" data-ride = "Carousel" data-wrap = "false" data-interval = "1000"> ...... </div>
Los tres atributos anteriores se pueden definir en elementos del contenedor o en identificadores (o enlaces de control izquierdo y derecho), pero la última definición tiene una prioridad más alta.
Imagen Carousel-Método de activación de JavaScript
Se han eliminado las tres declaraciones de datos de datos = "Carousel" y Data-Slide = "Prev" y Data-Slide = "Next". Usemos el código JS para implementar las funciones de "Carrusel automático de imágenes" y "botones hacia adelante y hacia atrás".
Use JS para implementar las funciones del "carrusel automático de imágenes" y "botones hacia adelante y hacia atrás"
De manera predeterminada, si el atributo de datos de datos = "Carousel" se define en el contenedor de carrusel, el efecto de conmutación de imagen del carrusel se cargará automáticamente después de cargar la página. Si no se define el atributo de ride de datos, la conmutación de imagen del carrusel se puede activar a través del método JavaScript. El método de uso específico es el siguiente:
La copia del código es la siguiente:
$ (". Carousel"). Carousel ();
También puede especificarlo mediante la identificación del contenedor:
La copia del código es la siguiente:
$ ("#slidershow"). Carousel ();
Se pueden establecer parámetros específicos en el método Carousel (), como:
| Nombre de atributo | tipo | valor predeterminado | describir |
| intervalo | número | 5000 | Tiempo de espera (milisegundos) para la rotación de diapositivas. Si False, el carrusel no comenzará el bucle automáticamente |
| pausa | cadena | flotar | El mouse predeterminado se suspende en el área de diapositivas y la reproducción comenzará cuando se vaya. |
| envoltura | Valor booleano | verdadero | Es el bucle continuo de carrusel |
Al usarlo, puede pasar los parámetros relevantes del estado al inicializar el complemento, como:
$ ("#slidershow"). Carousel ({intervalo: 3000});De hecho, cuando configuramos los parámetros para el método Carousel (), el efecto del carrusel se puede cambiar automáticamente. Sin embargo, el complemento Carousel en el marco Bootstrap también proporciona a los usuarios varios métodos de llamadas especiales, de la siguiente manera:
• .Carusel ("ciclo"): juega de izquierda a derecha;
• .Carousel ("Pausa"): Playback de detener el bucle;
• .Carousel ("número"): bucle al marco especificado, el subíndice comienza desde 0, similar a una matriz;
• .Carousel ("anterior"): regrese al marco anterior;
• .Carusel ("Siguiente"): siguiente cuadro
Por ejemplo, el método de llamada anterior, los botones de avance y retraje no pueden funcionar correctamente. De hecho, pueden usarse para trabajar normalmente a través de los métodos .Carusel ("previo") y. Carousel ("siguiente"). El código es el siguiente:
$ (function () {$ ("#slidershow"). Carousel ({intervalo: 2000}); $ ("#slidershow a.left"). click (function () {$ (". Carousel"). Carousel ("prev");}); $ ("#sliderShowShowShowSHOWSHOWSHOW A.Right "). Click (function () {$ (". Carousel "). Carousel (" siguiente ");});}); <! Doctype html> <html> <head> <meta charset = "utf-8"> <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.0/css/bootstrap.min.css"> <style> body {padding: 10px: 10px; 10px;} </style> </head> <body> <div id = "Carousel-example" data-ride = "Carousel"> <!-Indicadores-> <ol> <li data-Target = "#Carousel-Example" data-slide-to-to = "0"> </li> <li data-target = "#carousel-example"-slide-to = "1" 1 "<</li> </li> <li data-target ="#Carousel-exame " data-Target = "#Carousel-Example" data-slide-to = "1"> </li> <li data-target = "#carousel-exame" data-slide-to = "1"> </li> <li data-target = "#carousel-exame" data-slide-to = "2"> </li> </ol> <! src = "http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home5.jpg" /><div>...</div></div><div>img src = "http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home2.jpg" /><div>...</div></div><div>img src = "http://bfsu.sinaApp.com/wp-content/themes/bfsu/i/homepix/home3.jpg" /><Div>...</div></div><!-- Controls-> <a href = "#Carousel-exame" href = "#Carousel-Example" data-slide = "next"> <span> </span> </a> </div> <!-<script> $ (function () {$ ('. Carousel'). Carousel ();}); </script>->> <script src = "js/jQuery.min.js"> </script> <script <script <script <script> src = "js/bootstrap.min.js"> </script> <!-<script src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"> </script>-> <!-<script src = "http://maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>-> </body> </html>Wulin.com recomienda temas relacionados con Bootstrap:
Habilidades de operación de componentes de arranque
Resumen del conocimiento relacionado con la bootstrap
Lo anterior es la explicación detallada del uso de ejemplos de diagrama de rotación de carrusel de bootstrap introducido por 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!