O uso do bootstrap para escrever carrossel de imagem do carrossel pode economizar muito tempo. O Image Carousel é uma tecnologia comum nas páginas da web, mas, se escrita diretamente, requer uma codificação longa de JavaScript e não é fácil controlar o tamanho.
Deixe-me também dizer que o significado original da palavra carrossel é um cavalo de carrossel.
1. Objetivos básicos
Carrossel Para escrever várias imagens na página da web, o mouse é colocado nele e a descrição da imagem é fornecida abaixo de cada imagem.
Como o software de gravação de vídeo de computador do autor é bastante ruim, ele também sente que não há necessidade de atrair muito tempo nele. Ele acha que, desde que possa explicar o problema, o GIF abaixo é mais perda de cores, mas o efeito básico ainda é mostrado.
O carrossel, o componente de bootstrap de bootstrap, não é compatível com o IE6 e 7. Se o suporte do IE6 for necessário, você precisará baixar o suporte do componente IE6 da Bootstrap deste site (clique para abrir o link). Ao mesmo tempo, a descrição do arquivo de imagem no Google Chrome penetrará um pouco preto, mas não afetará a navegação:
As situações de apresentação em diferentes navegadores são diferentes. O efeito do IE8 é assim:
2. Ideias básicas
Veja o layout da página da seguinte imagem:
3. Processo de produção
1. A primeira etapa do "Bootstrap para escrever uma caixa de diálogo que pode ser fechada na página atual da web" (clique para abrir o link)
Como você precisa usar o Bootstrap, você pode baixar os componentes no site oficial (clique para abrir o link). A versão de bootstrap usada no ambiente de produção não é compatível com 2. Recomenda -se usar o Bootstrap3 diretamente de acordo com seus documentos de desenvolvimento. Este artigo também é feito com base no bootstrap3. Ao mesmo tempo, o efeito JavaScript fornecido pelo Bootstrap3 precisa ser suportado no JQuery 1.11 (clique para abrir o link). Você pode baixar o JQuery 1.11 compatível com o antigo navegador IE6 do site oficial do jQuery, em vez de JQuery2 incompatível com o antigo navegador IE6. Após o download, configure o diretório do site. Decompressa Bootstrap3 diretamente para o diretório do site e coloque JQuery-1.11.1.js no diretório JS, ou seja, o mesmo diretório que o bootstrap.js. A estrutura da pasta do site é aproximadamente a seguinte:
2. A seguir, é apresentado o código completo da página da web, e a parte a seguir será explicada:
<! xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <title>Picture Carousel</title> </head> <body> <div> <div> <h1> picture carousel </h1> </div> <div> <div id = "carousel" data-ride = "carousel" data-interval = "1000"> <ol> <li data-target = "#carousel-expleric" Data-slide-to = "0"> " Data-slide-to = "1"> </li> <li data-target = "#carousel-explerg-generic" Data-slide-to = "2"> </li> </ol> <div role = "listbox"> <div> <a href = "imagens/img0.jpg"> <img src = "imagens/imagens/imagens/" imagens.JP0.jpg "> <img src =" imagens/imags/"imagens/" imagens/img0.jpg "> <mg src =" imagens/img/img0.jk/"imagens/img0.jpg"> <img src = "imagens/img/img/" </h3> <p> Imagem Descrição de eu sou img0 </p> </div> </div> <div> <a href = "imagens/img10.jpg"> <img src = "imagens/img10.jpg"> </a> <div> <h3> iMg10 </h3> <p> imagem de iMM. href = "Images/img2.jpg"> <img src = "imagens/img2.jpg"> </a> <div> <h3> img2 </h3> <p> Imagem descrição de eu sou img2 </p> </div> </div> <a href = "#carousel-exemple-genic" role = " <a href = "#carousel-expler-generic" role = "button" data-slide = "next"> <pan> </span> </a>
(1) <head> parte
<head> <!-Declare a codificação da Web, adapte-se automaticamente ao tamanho do navegador. Para usar o CSS do Bootstrap, o suporte ao jQuery é necessário. Para usar o bootstrap Js, title-> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <meta name = "viewport" content = "width = width," scale inicial = 1. 1, scalable = no "> <links = Media = "Screen"> <script type = "text/javascript" src = "js/jQuery-1.11.1.js"> </script> <script type = "text/javascript" src = "js/bootstrap.js"> </script> <title> imagem carousel </title> </hief>
(2) Parte <Body>
Declare primeiro um contêiner de contêiner, que pode fazer com que todos os elementos da página da web pertencem ao centro da página da web e depois escreva elementos neste contêiner.
Primeiro, escreva o cabeçalho, declare um cabeçalho e depois escreva um pedaço de texto dentro dele.
<div> <h1> Picture Carousel </h1> </div>
Em seguida, defina uma DIV de camada sem nome, que é usada principalmente para padronizar os componentes do carrossel da imagem. O tamanho do componente de carrossel de imagem de bootstrap não pode ser especificado para os elementos dentro dele, e os parâmetros de largura e altura são adicionados. Dessa forma, o componente de carrossel de imagem será distorcido. Ao mesmo tempo, para centralizar esse componente, você deve usar a direita da margem: Auto; margem-esquerda: automático; no atributo de estilo da div para restringir. O adicional align = "Center" não tem efeito.
Finalmente, existem descrições detalhadas de cada parte do componente da imagem:
<div> <!-O nome do componente de carrossel de imagem é carrossel, e o elemento de montagem de dados é exigido pelo bootstrap. O valor do intervalo de dados é alterar a imagem a cada 1000 milissegundos, ou seja, 1 segundo. Se esse valor for demais, o componente será distorcido-> <div id = "carousel" data-ride = "carousel" data-interval = "1000"> <!-Existem várias imagens definidas aqui. Se houver mais uma imagem, adicione mais um item abaixo. O valor do deslizamento de dados é adicionado. A primeira imagem, isto é, a imagem 0 deve ter class = "ativo", caso contrário, o componente não funcionará-> <ante> <li data-target = "#carousel-explerg-generérico" Data-slide-to = "0"> </li> <li data-target = "#carousel-exple-genérico" slide-to = "1"> Data-slide-to = "2"> </li> </ol> <div role = "listbox"> <!-Os seguintes são edições detalhadas de cada imagem. O valor da classe da primeira imagem deve estar ativo e o restante é o item-> <div> <!-significa que clique na imagem img0.jpg para abrir o hiperlink do img0.jpg. Se não houver hiperlink, remova a tag <a>-> <a href = "imagens/img0.jpg"> <img src = "imagens/img0.jpg"> </a> <div> <!-Descrição do texto em The Picture-> <H3> IMG0 </h3> <p> Descrição de iM iM iM Img0 href = "Images/img10.jpg"> <img src = "imagens/img10.jpg"> </a> <div> <h3> img10 </h3> <p> Descrição da imagem de eu sou img10 </p> </div> </div> <a hre hre = "imagens/img2.jp" src = "Images/img2.jpg"> </a> <div> <h3> img2 </h3> <p> Descrição da imagem de eu sou img2 </p> </div> </div> </div> <!-aqui estão dois botões no componente que pensam que a esquerda e direita, corrigirá o código "> <a a href" <pan> </span> </a> <a href = "#carousel-expler-generic" role = "button" data-slide = "Next"> <pan> </span> </div> </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 de plug-in bootstrap
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.