O efeito do carrossel da imagem pode ser visto na web, e muitas pessoas também a chamam de apresentação de slides. O principal efeito da exibição é tocar várias imagens em um ciclo, tocando da direita para a esquerda. Jogar vai fazer uma pausa quando o mouse pairará sobre a foto. Se o mouse pairar ou clicar no ponto no canto inferior direito, a imagem correspondente será exibida.
Este efeito de carrossel de imagem é implementado na estrutura de bootstrap através do plug-in carousel
Captura de tela do efeito de demonstração:
Código:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <!-<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootsstrap.min.ctcdn.com/bootstrap/3.2.0/css/bootstrap.min.min.cs) href = "css/bootstrap.min.css"/> <yoy> corpo {preenchimento: 10px; margem: 10px;} </style> </ad Head> <body> <div id = "mycarousel"> <!-Etapa 1: recipientes para carrossel. -> <!-#slidershow camada adiciona estilo de slide e use figuras e imagens para mudar os efeitos para torná-la suave-> <l> <!-Etapa 2: projete um contador de fotos de carrossel. -> <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> </Olgget = " Estilo de Inner-Inner para Controle-> <Div> <img src = "http://images3 src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> <div> <h4> título 2/h4> <p> imagem 2 </p> </niv> <d4> <img src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> <div> <h4> título 2/h4> <p> imagem 2 </p> </niv> <d4> <img src = "http://images3.c-ctrip.com/rk/201403/yfdd580145a.png"> <div> <h4> Título três </h4> <p> Introdução ao conteúdo da figura três </p. Jogue o carrossel esquerdo e o controlador que joga para trás-> <a href = "#mycarousel" dados-slide = "prev"> ‹<!-<a href = "#slideRshow" role = "botão" "Button" = "prev">-> <span> </span> <a- a> <a "<a" ". data-slide = "Next" >› <span> </span> <!-<a href = "#carousel-explerg-generic" data-slide = "prev"> <pan> </span> </a> <a href = "#carousel-expleric" data-slide = "Next"> <pan> </span> </a>-> </div> <cript> $ ('. carousel'). carousel () </script> <script type = "text/javascript" src = "js/jquery.min.js"> </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.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>-> </body> </stml> /*sstrap.css Linha 5835 a 5863*/. /*Posicionamento absoluto de toda a área de contagem*/inferior: 10px; /*10px da parte inferior do contêiner carrossel*/z-index: 15; /*Defina seu nível no eixo z*//*centralize toda a área de contagem no nível*/esquerda: 50%; largura: 60%; preenchimento-esquerda: 0; margem-esquerda: -30%; text-align: centro; listão; -999px; cursor: ponteiro; cor de fundo: #000/9; cor de fundo: rgba (0, 0, 0, 0); borda: 1px sólido #fff; borda-radius: 10px;}/*defina o estilo de estado atual*/. Carousel-indicadores.Imagem Carousel-Playing of Declarative Touch Carousel
Existem duas maneiras de acionar o diagrama de carrossel, um é declarativo e o outro é JavaScript. Primeiro, vejamos o método declarativo.
O método declarativo é implementado definindo o atributo de dados, que pode controlar facilmente a posição do carrossel. Inclui principalmente os seguintes tipos:
• Propriedade de Ride Data: pegue o valor do carrossel e defina-o no carrossel.
• 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, pegue o valor "#slidershow" e defina -o em cada LI do contador de carrossel.
• Atributo Slide Data: Os valores incluem Anterior, a seguir, prev significa rolar para trás e, a seguir significa rolar para a frente. Esse valor de 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 carrossel do contêiner.
• 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.
Além de data-ride = "Carousel", slide de dados e slide-slide-to, o componente Carousel também suporta três outras propriedades personalizadas:
| Nome do atributo | tipo | valor padrão | descrever |
| intervalo de dados | número | 5000 | Tempo de espera (milissegundos) para rotação de slides. Se falso, o carrossel não iniciará o loop automaticamente |
| pausa de dados | corda | Passe o mouse | O mouse padrão é suspenso na área de slides e a reprodução começará ao sair. |
| Data-wrap | Valor booleano | verdadeiro | É o loop contínuo do carrossel |
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>
Os três atributos acima podem ser definidos em elementos de contêiner ou em identificadores (ou links de controle esquerdo e direito), mas a última definição tem uma prioridade mais alta.
Image Carousel-Método Javascript Trigger
As três instruções Data-ride = "Carousel" e Data-slide = "Anterior" e Data-slide = "Next" foram removidas. Vamos usar o código JS para implementar as funções do "Carousel de imagem automática" e "botões para frente e para trás".
Use JS para implementar as funções de "Carousel de imagem automática" e "botões para frente e para trás"
Por padrão, se o atributo Data-ride = "Carousel" for definido no recipiente do carrossel, o efeito de comutação de imagem do carrossel será carregado automaticamente após o carregamento da página. Se o atributo Ride Data não estiver definido, a comutação da imagem do carrossel poderá ser acionada através do método JavaScript. O método de uso específico é o seguinte:
A cópia do código é a seguinte:
$ (". Carousel"). Carousel ();
Você também pode especificá -lo pelo ID do contêiner:
A cópia do código é a seguinte:
$ ("#Slidershow"). Carousel ();
Parâmetros específicos podem ser definidos no método carousel (), como:
| Nome do atributo | tipo | valor padrão | descrever |
| intervalo | número | 5000 | Tempo de espera (milissegundos) para rotação de slides. Se falso, o carrossel não iniciará o loop automaticamente |
| pausa | corda | Passe o mouse | O mouse padrão é suspenso na área de slides e a reprodução começará ao sair. |
| enrolar | Valor booleano | verdadeiro | É o loop contínuo do carrossel |
Ao usá-lo, você pode passar os parâmetros relevantes do status ao inicializar o plug-in, como:
$ ("#slidershow"). Carousel ({intervalo: 3000});De fato, quando configuramos parâmetros para o método carousel (), o efeito do carrossel pode ser alterado automaticamente. No entanto, 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"): toca da esquerda para a direita;
• .CAROUSEL ("Pausa"): Parar de reprodução de loop;
• .CAROUSEL ("Número"): loop para o quadro especificado, o subscrito começa de 0, semelhante a uma matriz;
• .CAROUSEL ("ANTER"): retorne ao quadro anterior;
• .Carousel ("Next"): Próximo quadro
Por exemplo, o método de chamada anterior, os botões avançados e traseiros não podem funcionar corretamente. De fato, eles podem ser usados para trabalhar normalmente através dos métodos .Carousel ("Anterior") e .Carousel ("Next"). O código é o seguinte:
$ (function () {$ ("#slidershow"). Carousel ({intervalo: 2000}); $ ("#slidershow a.left"). clique (function () {$ (". carousel"). carousel ("prev");}); $ ("#slidershow A. bem -perado "). Clique em (function () {$ (". Carousel "). Carousel (" Next ");});}); <! Doctype html> <html> <head> <meta charset = "utf-8"> <link rel = "Stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.0/ctrods/bootstrap.min.cssssssssssssssssssssssssncs"> padding; 10px;} </style> </head> <body> <div id = "carousel-explet" data-ride = "carousel"> <!-indicadores-> <ar> <li data-target = "#carousel-expler" slide-to = "0"> </li <i a data-target = "#carousel-example Data-Target = "#Carousel-Exemplo" Data-slide-to = "1"> </li> <li data-Target = "#carousel-exemplo" Data-slide-to = "1"> </li> <Li Data-Target = "#Carousel-Exemplo" Data-slide-to ">> </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><! href = "#carousel-exemplo" data-slide = "next"> <pan> </span> </a> </div> <!-<sCript> $ (function () {$ ('. carousel'). carousel (); 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 recomenda tópicos relacionados ao Bootstrap:
Habilidades de operação de componentes de bootstrap
Resumo do conhecimento relacionado ao bootstrap
O exposto acima é a explicação detalhada dos exemplos de uso do diagrama de rotação do bootstrap carrossel apresentado a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!