He compartido tres efectos de carrusel de imágenes de bootstrap, ¡y creo que siempre hay uno con el que estás satisfecho!
El primer efecto: carrusel simple de bootstrap
<! Doctype html> <html> <fead> <title> Bootstrap Instance- Simple Carousel Plug-in </title> <link href = "/bootstrap/3.0.3/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/jquery/2.0.0/jQuery.min.js"/scripts "<criete </script <script <scruis src = "/bootstrap/3.0.3/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <!-Carousel Metrics-> <ol> <li data-Target = "#myCarousel" Data-Slide-to = "0"> </li> <li Data-Target = "#Carousel" data-slide-to = "1"> </li> <li data-target = "#myCarousel" data-slide-to = "2"> </li> </ol> <!-Proyecto de Carousel-> <div> <img src = " src = "/wp-Content/uploads/2014/07/slide2.png"> </div> <div> <img src = "/wp-content/uploads/2014/07/slide3.png"> </div> </div> <!-navegación de carousel-> <a href = "#myCarouselel" shat-slide "previo" ... " <a href = "#mycarousel" data-slide = "next" >› </a> </div> </body> </html>
El segundo tipo: carrusel con título (manual)
; src = "/bootstrap/3.0.3/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <!-Carousel Metrics-> <ol> <li data-Target = "#myCarousel" Data-Slide-to = "0"> </li> <li Data-Target = "#Carousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel Project--> <div> <img src="/wp-content/uploads/2014/07/slide1.png"> <div>Title 1</div> </div> <div> <img src = "/wp-Content/uploads/2014/07/slide2.png"> <div> title 2 </div> </div> <div> <img src = "/wp-Content/uploads/2014/07/slide3.png"> <div> título 3 </div> </div> </iv> <!-Carusel Navigation-> <At <At <At <At <At <At <AT <AT <AT <AS href = "#myCarousel" data-slide = "previo"> ‹</a> <a href = "#myCarousel" data-slide = "next" >› </a> </div> </body> </html>
El tercer tipo: JS Control Carrusel automático
<! Doctype html> <html> <fead> <title> bootstraPJS control Carousel </title> <link href = "/bootstrap/3.0.3/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/jquery/2.0.0/jQuery.min.min.js"> <crito script src = "/jquery/2.0.0/jQuery.min.min.js"> <crito -script src = "/jquery/2.0.0/jQuery.min.min.js"> <crito script src = "/jquery/2.0.0/jQuery.min.min.js"> <crito -scrito src = "/bootstrap/3.0.3/js/bootstrap.min.js"> </script> <body> <div id = "myCarousel"> <!-Indicador de Carousel-> <ol> <li data-Target = "#mycarousel" data-slide-to = "0"> </li> <li-target = "#myCarousel" data-slide-to = "1"> </li> <li data-target = "#myCarousel" data-slide-to = "2"> </li> </ol> <!-Proyecto de Carousel-> <div> <img src = " src = "/wp-Content/uploads/2014/07/slide2.png"> </div> <div> <img src = "/wp-content/uploads/2014/07/slide3.png"> </div> </div> <!-navegación de carousel-> <a href = "#myCarouselel" shat-slide "previo" ... " <a href = "#myCarousel" data-slide = "next" >› </a> <!-Botón de control-> <div style = "text-align: center;"> <input type = "botón" value = "inicio"> <input type = "Botón" valor = "pausa"> <type de entrada = "Botón" Valor = "Tapado previo"> <type de entrada = "Botón" Valor "Valor =" Slide "Slide" <input type type " 1 "> <input type =" button "value =" slide 2 "> <input type =" button "value =" slide 3 "> </div> </div> <script> $ (function () {// inicialize carousel $ (". Start-slide "). Click (function () {$ ("#myCarousel "). Carousel ('ciclo');}); // CAROUSEL $ (". PAUSE-SLIDE"). Click (function () {$ ("#myCarousel"). Carousel ('pausa');}); $ (". Next-Slide"). Click (function () {$ ("#MyCarousel"). Carousel ('Next');}); $ ("#myCarousel"). Carousel (1); }); </script> </body> </html>Se pueden establecer parámetros específicos en el método Carousel (), como:
Al usarlo, puede pasar los parámetros relevantes del estado al inicializar el complemento, como:
$ ("#slidershow"). Carousel ({intervalo: 3000});El complemento Carousel en el marco Bootstrap también proporciona a los usuarios varios métodos de llamadas especiales, de la siguiente manera:
.Carousel ("ciclo"): juega de izquierda a derecha;
.CAROUSEL ("PAUSE"): STOP BOOT REPLAYBACK;
.CAROUSEL ("Número"): bucles al marco especificado, el subíndice comienza desde 0, similar a una matriz;
.CAROUSEL ("anterior"): regrese al marco anterior;
.CAROUSEL ("SIGUIENTE"): Siguiente marco
Use el atributo de datos para controlar el carrusel:
<! Doctype html> <html> <Head> <title> Bootstrap Instance - Método de complemento de Carousel </title> <link href = "http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel = "Stylesheet"> <scrito src = "http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> </script> <script src = "http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"> </script> </seve> <cody> <body> data-wrap = "true" data-interval = "1000"> <!-Indicador de Carousel-> <ol> <li data-Target = "#myCarousel" data-slide-to = "0"> </li> <li data-Target = "#myCarousel" data-slide-to = "1"> </li> <li-target = "#myCarouselel" " data-slide-to="2"></li> </ol> <!-- Carousel project --> <div> <div> <img src="/wp-content/uploads/2014/07/slide1.png"> </div> <div> <img src="/wp-content/uploads/2014/07/slide2.png"> </div> <div> <img src = "/wp-Content/uploads/2014/07/slide3.png"> </div> </div> <!-Carousel Navigation-> <a href = "#mycarousel" data-slide = "anterior"> ‹‹/a> <a href = "#myCarousel" Data-slide = "siguiente" >› </a> <! style = "text-align: center;"> <input type = "button" value = "start"> <input type = "button" value = "pause"> <input type = "button" value = "deslizamiento anterior"> <input type = "button" value = "Slide"> <input type = "Botón" Valor = "Slide 1"> <Input type = "Button" Valor = "Slide 2"> <Input type = "Botón" Botón "Valor" Slide 3 "" "Valor" "". </div> </div> </body> </html>
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:
1. Propiedad de ride de datos: tome el valor de carrusel y defina en carrusel.
2. 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 como "#Slidershow" y defina en cada LI del mostrador de carrusel.
3. Atributo de deslizamiento de datos: los valores incluyen previa, 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 contenedor 4. Carousel.
5. 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.
Aquí debe tener en cuenta que puede agregar un estilo de diapositiva a la capa #Slidershow, y usar el efecto de conmutación de imagen y imagen para que sea suave.
<div id = "slidershow" data-ride = "Carousel"> ... </div>
Además de Data-Ride = "Carousel", Data-Slide y Data-Slide-To, el componente Carousel también admite otras tres propiedades personalizadas:
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>
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 la mesa de bootstrap
Tutorial de uso de complemento de bootstrap
Maravilloso intercambio de temas: jQuery Picture Carousel JavaScript Picture Carousel Bootstrap Picture Carousel
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.