Vamos dar uma olhada no efeito do bootstrap picture carrossel:
O exposto acima é o efeito compartilhado por todos, mas esta é a página inicial do NetEase Cloud Music.
Lembre -se de aparecer pela primeira vez na biblioteca de controle oficial do iOS7, e o Android também adicionou essa visão a uma determinada versão. O design é universal ... O Bootstrap3 também suporta o uso de tais efeitos na web.
Em seguida, uma análise simples:
1. Análise estrutural
Uma imagem de carrossel inclui principalmente três partes:
☑ Fotos de carrossel
☑ Contador para fotos de carrossel
☑ O controlador para fotos de carrossel
Etapa 1: projete o recipiente para fotos de carrossel. O estilo do carrossel é adotado na estrutura do bootstrap e um valor de ID é definido para este contêiner, para que o atributo de dados seja usado para declarar o gatilho posteriormente.
Copie o código da seguinte forma: <div id = "slidershow"> </div>
Etapa 2: projete um balcão de imagem de carrossel. Adicione uma calculadora de imagem de carrossel dentro do contêiner Div.Carousel, usando o estilo de carrossel-indicadores. Sua principal função é exibir a ordem de reprodução da imagem atual (existem várias imagens, e a seguinte é que as mesmas listas são geralmente usadas para fazê -lo:
<div id = "slidershow"> <!-Defina a ordem dos carrosséis da imagem-> <ar> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li>
Etapa 3: projete a área de reprodução de imagem do carrossel. Em todo o efeito da imagem do carrossel, a área de reprodução é a área mais crítica, usada principalmente para colocar fotos que precisam ser carrossel. Esta área é controlada usando o estilo de entranha de carrossel e também é colocada no recipiente de carrossel, e cada imagem do carrossel é colocada através do contêiner de itens:
<div id = "Slidershow"> <!-Defina a ordem dos carrosséis da imagem-> <Oli> <li> 1 </li>… </ol> <!-Defina as fotos do carrossel-> <div> <a href = "##"> <img src = http://images3.ctrip.com/rk/rk/rk/rk/rk/rk/rk/rk/rk/rk/rk/rk/rk/rk/rk/rk/rk/rk/rk/20140) </div> <div> <a href = "##"> <img src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> </a> 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>
Etapa 4: Defina a descrição da imagem do carrossel. Muitos efeitos da imagem do carrossel também têm seu próprio título e descrição de conteúdo em cada imagem. De fato, o carrossel na estrutura do bootstrap também fornece efeitos semelhantes. Basta adicionar o código correspondente na parte inferior da imagem no item.
<div ID = "Slidershow"> <!-Defina a ordem dos carrosséis de imagem-> <li> <li> 1 </li> ... <!-imagem título correspondente e descrição conteúdo-> <div> <h3> título da imagem </h3> <p> Descrição Conteúdo ... </p> </div> </div>… </div> </div>
Etapa 5: projete o controlador de imagem do carrossel. Muitas vezes, as fotos do carrossel também têm um controlador que joga para frente e para trás. No carrossel, é alcançado combinando a esquerda e a direita com o estilo de controle de carrossel. Onde esquerda significa reprodução para a frente, direita significa reprodução para trás. Também é colocado no recipiente de carrossel:
<div id = "Slidershow"> <!-Defina a ordem dos carrosséis de imagem-> <Ol>… </ol> <!-Defina as fotos do carrossel-> <div>… </div> <!-Defina o controlador de imagem do carrossel-> <a href = ""> </span> </a> <a href = ">
2. Processo de implementação
<div id = "Carousel-Exemplo-Genérico" Data-ride = "Carousel"> <!-Indicadores-> <ol> <li data-target = "#carousel-expleric-genérico" Data-slide-to = "0"> </li> <li data-taarget = "#carousel-expleric" Data-slide-to = " Data-Target = "#Carrossel-Exemplo-Genérico" Data-Slide-to = "2"> </li> </ol> <!-Wrapper para slides-> <div role = "listbox"> <div> <img src = "..."> <div> ... </div ... <!-Controls-> <a href = "#carousel-exemplo-generérico" role = "button" data-slide = "prev"> <pan> </span> <pan> anterior </span> </a> <a href = "#carousel-expleric" role = "button" slide = "a seguir" <pange>
Dividido em três partes
1. Indicador
Uma parte é o pequeno ponto abaixo ... é o indicador
A classe OL é usada para criar este indicador
Cada atributo slide-to = "0" é usado para orientar o local para definir o estado de ativação padrão.
item
<div> <img src = "..."> <div> <h3> ... </h3> <p> ... </p> </div> </div>
Não há suspense, basta preencher o título e o conteúdo da imagem
2. Controladores esquerdos e esquerdos
O código é o seguinte
<a href = "#mycarousel" role = "button" data-slide = "prev"> <span aria-hidden = "true"> </span> <pan> anterior </span> </a> <a href = "#mycarousel" role = "button" slide = "a seguir"> <span-hidden = "" ">"> ">"> ">
Operação em JavaScript
inicialização
$ ('. Carrossel'). Carrossel ({intervalo: 2000})Executar um loop
.Carousel ('Ciclo')
pausa
.Carousel ('pausa')
O posicionamento para um item específico começa de 0
.Carousel (número)
O anterior
.Carousel ('prev')
Próximo
.Carousel ('Next')
Mais conteúdo sobre bootstrap também pode ser encontrado em tópicos especiais: "Tutorial de aprendizado de bootstrap"
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.