1. Princípio da implementação
(1) Coloque todas as imagens em um contêiner dos pais e defina a aparência e o esconderijo das imagens através do atributo de exibição;
(2) o diagrama de carrossel é dividido em carrossel manual e carrossel automático;
O foco do carrossel manual é clicar no pequeno círculo abaixo da imagem cada vez que você clicar nela, obter seu número de índice e deixar a imagem com o número de índice correspondente ser exibido, e o pequeno círculo neste momento é destacado;
Carrossel automático: use o timer setInterval () para reproduzir a imagem a cada determinada vez.
(3) Todo conhecimento básico: Operação DOM, Timer, Aplicação de Eventos.
2. Layout da página da imagem do carrossel:
<div id = "Content"> <!-Total Contêiner pai-> <div> <!-Recipiente contendo imagens-> <div> <img src = "./ img/lunbo1.jpg"> </div> <div> <img src = "./ img/lunbo2.jpg"> </div> <img src = "./ img/lunbo2.jpg"> <//<d3.- jejpg/jumnpg/jumnpg/jumnpg/jumnpg/jumnpg/jumnpg/jumnpg/jumb = ". Círculo de indicação abaixo da imagem-> <ul> <li id = 'pic1'> ● </li> <li id = 'pic2'> ● </li> </ul> <!-role as setas esquerda e direita da imagem para frente e para trás-<a href = "#"> </span> </a> <ahref = "#
3. Estilo CSS do diagrama de carrossel:
#Content {Width: 100%; altura: 500px; posição: relativa;}. Inner-interno {Posição: relativa; largura: 100%; estouro: oculto; Altura: 500px; } .Carousel-Inner> .item> img {display: block; altura de linha: 1; Z-Index: 1;}. Carrossel-Indicators {Posição: Absoluto; Bottom: 10px; Esquerda: 45%; Z-Index: 2; tipo de listar no tipo: nenhum;}. Carrossel-Indicadores Li {Display: Block em linha; Padding: 0 15px; S-LOFELE: 24PX; Color:#99; Cursor: Pointer; Z-Index: 2;}. Active1 {Font-Size: 28px; cor: #fff;}. Carrossel-Control {Position: Absolute; Decoração de Texto: Nenhum; Cor: #999; Fonte-peso: Bold; Opacity :.5; Font-Size: 40px; Z-Index: 3;}. Carrossel-Control: Round {Color: fff; Text-Decoration: Nenhum; Opacity: .9; Esboço: Nenhum; Fonte-Size: 42px;}. Anterior {top: 30%; Esquerda: 20px; } .next {top: 30%; direita: 20px;}4. Código de implementação JS para diagrama de carrossel:
window.onload = function () {// Inicialização do carrossel var lunbo = document.getElementById ('content'); var iMgs = lunbo.getElementsByTagName ('img'); var uls = lunbo.getElementsByTagName ('ul'); var lis = lunbo.getElementsByTagName ('li'); // No estado inicial, um círculo está no modo de destaque lis [0] .style.fontsize = '26px'; lis [0] .style.color ='fff '; pic_index = 1; // carrossel automático. Use pic_time para gravar reprodução, você pode usar o clearInterval () para limpá -lo a qualquer momento. var pic_time = setInterval (autobofang, 3000); // carrossel manual para (var i = 0; i <lis.length; i ++) {lis [i] .addeventListener ("mouseOnTover", alteração, false);} função (event) {Event = events | Var Children = Target.ParentNode.Children; for (var i = 0; i <crianças.Length; i ++) {if (target == Children [i]) {picchange (i); }}} // Função de comutação de imagem Função PicChange (i) {// Deixe todas as imagens não serem exibidas, e todos os círculos estão em estilo normal para (var j = 0; j <imgs.length; j ++) {imgs [j] .style.display = 'none'; lis [j] .style.fontsize = '24px'; lis [j] .style.color = '#999';} // Deixe a imagem de índice selecionada ser exibida e o círculo correspondente é destacado IMGS [i] .style.display = 'bloco'; lis [i] .style.fontsize = '26px'; lis [i] .style.color = '#fff'; } // Função de processamento de eventos automáticos AutoBofang () {if (pic_index> = lis.length) {pic_index = 0;} alteração1 (pic_index); pic_index ++;} // eventos na conversão da função de imagem de reprodução automática 1 (Índice), picchank (Índice); uls [0] .AddeventListener ("mouseOver", pausa, false); // mouse move a etiqueta UL, exibe automaticamente a imagem continua uls [0] .AddeventListener ("mouseOut", vá, false);} // reproduza a pausa de pause (event) {var event = events = Target = Event.Target || Event.srCeLEMENT; switch (Target.id) {case "Pic1": ClearInterval (pic_time); quebra; case "pic2": clearInterval (pic_time); quebra; case "pic3": clearInterval (pic_time); break;}} // reprodução automática Função contínua de imagem go (event) {var event = event || window.event; var Target = Event.Target |. switch (target.id) {case "pic1": pic_index = 1; pic_time = setInterval (autobofang, 3000); interrupção; case "pic2": pic_index = 2; pic_time = setInterval (autobofang, 3000); quebra; case "pic3": pic_index = 3; pic_time = setInterval (autobofang, 3000); quebra;}}}5. Imagem de reprodução:
6. Problemas e deficiências encontradas
Problema: quando o mouse se move para a tag UL pela primeira vez, a imagem automática do carrossel para, o mouse se move e o carrossel automático continua, mas à medida que a operação está em execução, a imagem do carrossel muda mais e mais rápida e clicando na tag UL nesse momento não funciona mais.
Causa do problema: quando o temporizador é usado novamente após interromper o carrossel, o valor não é atribuído ao pic_time para gravação, para que o mouse não seja movido para a tag UL novamente para limpar o cronômetro. Portanto, clicar na tag UL novamente não pode pausar a reprodução automática de carrossel, e a velocidade está ficando mais rápida e rápida.
Inadequação: o efeito de não realizar rolagem como o gráfico de carrossel do Taobao não foi alcançado, e o efeito indicador das setas esquerda e direita não foi concluído. Isso continuará sendo aprendido no estágio posterior, melhorar e compartilhar.