Eu compartilhei três efeitos de carrossel de bootstrap e acredito que sempre há um com o qual você está satisfeito!
O primeiro efeito: bootstrap simples carrossel
<! Doctype html> <html> <head> <title> Instância de bootstrap- plug-in de carrossel simples </title> <link href = "/bootstrap/3.0.3/css/bootstrap.min.css" rel = "styleSheet"> <script src = "/jQuery/2.. <script src = "/bootstrap/3.0.3/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <!-metrics de carrossel#####myroUsl##myomsc##myoMoUl#myoMoUl#myomsc#) <ol> <li- li-taarget = "#mycarousel" my-slide = "" 0 "> <li> Data-slide-to = "1"> </li> <li data-target = "#mycarousel" Data-slide-to = "2"> </li> </ol> <!-Project Carousel-> <div> <img src = "/wp-content/uploads/2014/07/slide1.png"> src = "/wp-content/uploads/2014/07/slide2.png"> </div> <div> <img src = "/wp-content/uploads/2014/07/slide3.png"> </div> </div> <!-carousel-sigation-> <a hrefar =#myring) href = "#mycarousel" data-slide = "next" >› </a> </div> </body> </html>
O segundo tipo: carrossel com título (manual)
<! Doctype html> <html> <head> <title> Instância de bootstrap - título de plug -in de carrossel </title> <link href = "/bootstrap/3.0.3/csS/bootstrap.min.css" RelSheet/styleSeet/src.mc = jQuery/jQuery.CSS "Rel =" StyleSeet "> <cript src = jQuery/jQuery/2.min. <script src = "/bootstrap/3.0.3/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <!-metrics de carrossel#####myroUsl##myomsc##myoMoUl#myoMoUl#myomsc#) <ol> <li- li-taarget = "#mycarousel" my-slide = "" 0 "> <li> Data-slide-to = "1"> </li> <li data-target = "#mycarousel" Data-slide-to = "2"> </li> </ol> <!-Project Carousel-> <div> <img src = "/wp-content/uploads/2014/07/slid src = "/wp-content/uploads/2014/07/slide2.png"> <div> Título 2 </div> </div> <div> <img src = "/wp-content/uploads/2014/07/slide3.png"> <div> título 3 </div> </div> <///07/slide.png "> <div> data-slide = "prev"> ‹</a> <a href = "#mycarousel" data-slide = "next" >> </a> </div> </body> </html>
O terceiro tipo: JS Control Carrossel automático
<! Doctype html> <html> <head> <titter> bootstrapjs Controle Carrossel </ititle> <link href = "/bootstrap/3.0.3/css/bootstrap.Min.css" rel = "styleSheet"> <erg. src = "/bootstrap/3.0.3/js/bootstrap.min.js"> </script> <body> <div id id = "mycarousel"> <!-carrossel indicador-> <ar> <li data-target = "#mycarousel" slide-to = "0"> </li> Data-slide-to = "1"> </li> <li data-target = "#mycarousel" Data-slide-to = "2"> </li> </ol> <!-Project Carousel-> <div> <img src = "/wp-content/uploads/2014/07/slide1.png"> src = "/wp-content/uploads/2014/07/slide2.png"> </div> <div> <img src = "/wp-content/uploads/2014/07/slide3.png"> </div> </div> <!-carousel-sigation-> <a hrefar =#myring) href = "#mycarousel" data-slide = "next" >› </a> <!-botão de controle-> <div style = "text-align: Center;"> <input type = "button" value = "iniciar"> <input type = "button" "typing" pause "> <input =" "" ")> <rifp type =" input "" type "" type = "type =" "") 1 "> <input type =" button "value =" slide 2 "> <input type =" button "value =" slide 3 "> </div> </div> <cript> $ (function () {// inicialize carousel $ (". carrossel $ (". PAUSE-Slide"). Clique em (function () {$ ("#mycarousel"). Carousel ('pausa');}); ". $ ("#mycarousel"). Carousel (1); }); </script> </body> </html>Parâmetros específicos podem ser definidos no método carousel (), como:
Ao usá-lo, você pode passar os parâmetros relevantes do status ao inicializar o plug-in, como:
$ ("#slidershow"). Carousel ({intervalo: 3000});O plug-in carousel na estrutura do bootstrap também fornece aos usuários vários métodos de chamada especial, como segue:
.Carousel ("Ciclo"): Jogue da esquerda para a direita;
.CAROUSEL ("Pausa"): Parar de reprodução de loop;
.CAROUSEL ("Número"): Loops to the Frame especificado, o subscrito começa a partir de 0, semelhante a uma matriz;
.Carousel ("Anterior"): retorne ao quadro anterior;
.Carousel ("Next"): Próximo quadro
Use o atributo de dados para controlar o carrossel:
<! Doctype html> <html> <head> <title> Instância do bootstrap - Método do plug -in do carrossel </ititle> <link href = "http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" Rel = "Stylesets" 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">>> Data Data-wrap = "true" Data-interval = "1000"> <!-Indicador de carrossel-> <Ol> <Li Data-Target = "#Mycarousel" Data-slide-to = "0"> </li> <i Data-Target = "#mycarousel" Data-slide-to "1"> <li> <i> </ol> <!-Projeto de carrossel-> <div> <div> <img src = "/wp-content/uploads/2014/07/slide1.png"> </div> <div> <img src = "/wp-content/uploads/2014/07/slide2.png"> </Div> </divi> src = "/wp-content/uploads/2014/07/slide3.png"> </div> </div> <!-navegação por carrossel-> <a href = "#mycarousel" data-slide = "prev"> ‹</a> <a href = "#mycarousel" slide = "Data"> ‹</a> <a href = "#" <! style = "text-align: Center;"> <input type = "button" value = "start"> <input type = "button" value = "pausa"> <input type = "button" value = "slide anterior"> <input type = "button" buttão "" próximo "> <input Type =" slide "=" slide 1 "> <input" "" </div> </div> </body> </html>
O método declarativo é implementado definindo o atributo de dados, que pode controlar facilmente a posição do carrossel. Inclui principalmente os seguintes tipos:
1. Propriedade de Ride Data: Pegue o valor do carrossel e defina-o no carrossel.
2. Propriedade do alvo de dados: pegue o nome de identificação ou outro identificador de estilo definido pelo carrossel de valor. Como mostrado no exemplo anterior, tome o valor como "#slidershow" e defina -o em cada LI do contador de carrossel.
3. Atributo de deslizamento de dados: os valores incluem prev, a seguir, prev significa rolar para trás e, em seguida, significa rolar para a frente. Esse valor da propriedade também é definido no link A do controlador de carrossel, e o valor do controlador HREF é definido como o nome do ID ou outro identificador de estilo do contêiner 4. Carrossel.
5. Slide de dados para atributo: usado para passar o subscrito de um determinado quadro, como slide-to = "2", que pode ser redirecionado diretamente para esse quadro especificado (o subscrito começa a partir de 0) e também é definido em cada LI do contador de carrossel.
Aqui você precisa observar que você pode adicionar estilo de slide à camada #slidershow e usar o efeito de comutação de imagem e imagem para ser suave.
<div id = "slidershow" data-ride = "carousel"> ... </div>
Além de data-ride = "Carousel", slide de dados e slide-slide-to, o componente Carousel também suporta três outras propriedades personalizadas:
O código a seguir implementa "O carrossel não faz um loop continuamente" e "o intervalo de tempo do carrossel é 1 segundo".
<div id = "slidershow" data-ride = "carousel" data-wrap = "false" intervalo de dados = "1000"> .... </div>
Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso da tabela de bootstrap
Tutorial de uso de plug-in bootstrap
Maravilhoso compartilhamento de tópicos: jQuery Picture Carousel JavaScript Imagem Carousel Bootstrap Picture Carousel
O exposto acima é uma introdução detalhada ao carrossel de imagem JavaScript. Espero que este artigo seja útil para todos para aprender a programação de JavaScript.