Na equipe, me perguntaram de repente como implementar imagens de carrossel. Estou no campo do front-end há mais de um ano, mas não o escrevo há muito tempo. Eu sempre usei um plug-in para escrevê-lo em Daniu. Hoje vou escrever um tutorial simples adequado para iniciantes para aprender. Obviamente, existem muitos princípios de implementação e padrões de design de diagramas de carrossel. O que estou falando aqui é implementá-los usando a programação funcional orientada ao processo. Comparado com os padrões de design orientados a objetos, o código parecerá inevitavelmente inchado e redundante. Mas a falta de abstração orientada a objetos é muito adequada para os novatos entenderem e aprenderem. Os alunos que já estão em morcego esperam esguichar menos. Você também pode dar mais sugestões.
O princípio do diagrama de carrossel:
Uma série de imagens de tamanhos iguais é azulejo, usando o layout CSS para exibir apenas uma imagem, e o restante está oculto. A reprodução automática é obtida calculando o deslocamento usando o timer ou trocando de imagens clicando manualmente nos eventos.
Layout HTML
Primeiro, o contêiner dos pais armazena todos os conteúdos e a lista de contêineres da criança contém imagens. Botões do subcontainer Pontos de botão da loja.
<div id = "contêiner"> <div id = "list" style = "esquerda: -600px;"> <img src = "img/5.jpg"/> <img src = "img/1.jpg"/> <img src = "img/2.jpg"/<img sc = "iMg/2.J.J.Jg/" /> <img src="img/4.jpg" /> <img src="img/5.jpg" /> <img src="img/1.jpg" /> </div> <div id="buttons"> <span index="1"></span> <span index="2"></span> <span index="3"></span> <span index="3"></span> <span index = "4"> </span> <span index = "5"> </span> </div> <a href = "javascript :;" id = "prev"> <</a> <a href = "javascript :;" id = "Next" >> </a> </div>
Otimize a rolagem perfeita.
Quando você muda da última imagem para a primeira imagem, há uma grande lacuna e usa duas imagens auxiliares para preencher essa lacuna.
Aqui está uma rolagem perfeita, observe diretamente o código, copie a última foto antes de colocar a primeira foto e copie a primeira foto atrás da última foto. E oculte a primeira imagem auxiliar de imagem (na verdade, a quinta imagem realmente foi exibida, então set style = "esquerda: -600px;")
Modificação CSS
1. Compreendendo o modelo da caixa, o fluxo de documentos e os problemas de posicionamento absoluto.
2. Preste atenção ao transbordamento: oculto da lista; Exiba apenas uma imagem da janela e oculte os lados esquerdo e direito.
3. Certifique -se de que cada camada de extensão nos botões seja coberta e defina -a no topo. (Z-Index: 999)
* {margem: 0; preenchimento: 0; decoração de texto: nenhum;} corpo {preenchimento: 20px;}#contêiner {width: 600px; altura: 400px; borda: 3px sólido#333; fluxo; {largura: 600px; altura: 400px; flutuação: esquerda;}#botões {posição: absoluto; altura: 10px; largura: 100px; z-index: 2; inferior: 20px; esquerda; 250px;}#buttons span {cursor: Pointer; float: esquerda; borda: 1px Solid #ff #fff; 50%; Antecedentes: #333; Margin-Right: 5px;} #Botões .On {Background: Orangered;}. Arrow {Cursor: Pointer; Display: Nenhum; Ponto de linha: 39px; Text-align: Center; Font-Size: 36px; Font-Weight: Bold; Warth 40xxxxxx; 180px; cor de fundo: rgba (0, 0, 0, .3); cor: #fff;}. Arrow: hover {background-cor: rgba (0, 0, 0, .7);}#contêiner: hover .arrow {display: block;}#prev {esquerda: 20px;##seguinte {{Right;JS
Primeiro, primeiro percebemos o efeito de clicar manualmente nas setas esquerda e direita para mudar a imagem:
window.onload = function () {var list = document.getElementById ('list'); var prev = document.getElementById ('prev'); var next = document.getElementById ('next'); função anima (deslocamento) {// o que é obtido é o estilo. Seja arredondado com parseint () para convertê -lo em um número. var newLeft = parseInt (list.style.left) + deslocamento; list.style.left = newleft + 'px';} prev.OnClick = function () {animate (600);} next.OnClick = function () {Animate (-600);}}}}Depois de executar, descobriremos que, se você continuar clicando na seta certa, haverá um espaço em branco e você não poderá retornar à primeira foto. Clique na seta esquerda para retornar à primeira imagem.
Usando o Google Chrome F12, o motivo é que usamos o deslocamento à esquerda para obter a imagem. Quando vemos que o valor esquerdo é menor que 3600, ficará em branco se não houver a 8ª foto, por isso precisamos fazer um julgamento no deslocamento aqui.
Adicione este parágrafo à função animada:
if (newleft <-3000) {list.style.left = -600 + 'px';} if (newleft> -600) {list.style.left = -3000 + 'px';}Ok, execute, sem problemas. As fotos do carrossel, como o nome sugerem, são fotos que você pode mover. No momento, precisamos usar o cronômetro de objeto interno do navegador.
Para os temporizadores, é necessário explicar a diferença entre o setInterval () e o setTimeout. Simplificando, o setInterval () é executado várias vezes e o setTimeout () é executado apenas uma vez.
Para um uso mais específico, você pode clicar no link para visualizar a diferença: window.setInterval window.setTimeout.
Aqui usamos o setInterval () porque nossa imagem precisa ser rolada. Insira abaixo
var timer; function play () {timer = setInterval (function () {prev.OnClick ()}, 1500)} play ();Corra, ok!
No entanto, quando queremos olhar cuidadosamente para uma determinada imagem, precisamos parar a imagem e podemos apenas limpar o cronômetro. Este método é usado aqui.
Aqui, precisamos operar em seu DOM e precisar obter toda a área do mapa do carrossel;
var container = document.getElementById ('contêiner'); function stop () {clearInterval (timer);} container.onMouseOver = stop; container.onMouseOut = play;Mas aqui, uma foto de carrossel foi basicamente concluída e alguns estudantes perguntarão, por isso é tão simples. Você viu a fila de pequenos pontos sob a foto? Eu adicionei recursos a você.
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Aqui está a versão atualizada:
var Botões = document.getElementById ('Botões'). getElementsByTagName ('span'); var index = 1; function buttonnshow () {// o estilo anterior precisa ser limpo para (var i = 0; i <botões.length; a matriz começa a partir de 0, portanto, o índice precisa de -1buttons [índice -1] .className = 'on';} prev.OnClick = function () {index -= 1; if (índice <1) {index = 5;} ButtonShow (); Animate (600);} a seguir. Temos apenas 5 pontos pequenos, por isso precisamos fazer um índice de julgamento += 1; if (índice> 5) {index = 1;} botão (); Animate (-600);}Parece muito mais normal agora, mas queremos clicar em um dos pequenos pontos a qualquer momento com o mouse e mudar para a imagem correspondente. O mesmo princípio é que ainda precisamos encontrar a imagem correspondente através do deslocamento.
for (var i = 0; i <button.length; i ++) {botões [i] .OnClick = function () {// otimize, clique no ponto atual na imagem atual e não execute o código a seguir. if (this.className == "on") {return;}/* offset Get: Aqui você obtém a posição em que o mouse se move para o ponto, use-o para vincular o índice aos botões do objeto [i], acesse o Google esse método de uso* //*, pois o índice aqui é um atributo personalizado, a necessidade de usar o método DOM2-LEVELTATTTRATTRT () para obter (*, para que o Índice seja um atributo personalizado, que você deve usar o método de nível* //) para obter o atributo DOM2-LEVATTTRATTRATTR (* parseInt (this.getAttribute ('index')); var offset = 600 * (clickIndex - index); Animate (deslocamento); // armazenam a posição após o clique do mouse e use -o para exibir os pontos como índice normal = clickindex; ButtonShow ();}}Todo mundo, você pode ter descoberto que essa imagem de carrossel é um pouco estranha e imprevisível. Ele muda para a esquerda, então reescreva -o:
function play () {// Alterne a imagem do carrossel para alternar a imagem para o timer certo = setInterval (function () {next.onClick ();}, 2000)} <! Doctype html> <html> <head> <meta charset = "utf-8"> <tittle> </title> <estilo =; 0; decoração de texto: nenhum;} corpo {preenchimento: 20px;}#contêiner {width: 600px; altura: 400px; borda: 3px Solid#333; Overflow: Hidden; Posição: Relativa;}#Lista {Width: 4200px; LOLT: 400PX; Posição: Absolute; 400px; flutuação: esquerda;} #botões {posição: absoluto; altura: 10px; largura: 100px; z-index: 2; inferior: 20px; esquerda: 250px;} #botões span {cursor: ponteiro; float: esquerda; borda: 1px sólido #fff; largura: 10px; 5px;}#botões .on {Background: orangered;}. Arrow {Cursor: Pointer; Display: None; Linha-HETURA: 39px; Text-Align: Center; Font-Size: 36px; RONT-INDEX: BOLD; WIDUTH: 40PX; Altura: 40px; Posição: Absoluto; Z-Index 2; .3); cor: #fff;}. Arrow: mouse {background-color: rgba (0, 0, 0, .7);}#contêiner: hover .arrow {display: block;}#prev {esquerda: 20px;}#a próxima {direita: 20px;} </estilo> <cript type = "text/" Event*//*Timer*/window.onload = function () {var container = document.getElementById ('contêiner'); var list = document.getElementById ('list'); var botões = document.getElementsById ('Button'). getElementsByTagName ('span'); var prev = Document.ElementIdId ('). índice = 1; var timer; função animar (deslocamento) {// o que é obtido é o style.left, que é a distância para ficar em relação à esquerda; portanto, após a primeira foto, o estilo.left é todo negativo, // e style.left é uma corda, que precisa ser arredondada com parseint () para convertê -lo em um número. var newLeft = parseInt (list.style.left) + deslocamento; list.style.left = newleft + 'px'; // julgamento de rolagem infinita se (newleft> -600) {list.style.left = -3000 + 'px';} se (newleft <-3000) { play () {// Timer de execução repetido = setInterval (function () {next.OnClick ();}, 2000)} função stop () {clearInterval (timer);} botões de função () {// limpe o estilo do pequeno DOT anterior para (var i = 0; i <blotns.lngmen; {botões [i] .className = "";}} // A matriz começa a partir de 0, portanto, o índice precisa -1buttons [index -1] .className = "on";} prev.OnClick = function () {index -= 1; if (index <1) {index = 5} buttnshow (); ânimo; Do cronômetro acima, o índice continuará aumentando. Temos apenas 5 pontos pequenos, portanto, precisamos fazer um índice de julgamento+= 1; if (índice> 5) {index = 1} animate (-600); buttonnshow ();}; para (var i = 0; i <botões.Length; i ++) {Buttons [] .t.OnClick = DO) {// Otimize, otimize; clique em curta, a corrente. if (this.className == "on") {return;}/* Aqui temos a posição em que o mouse se move para o ponto, use-o para vincular o índice aos botões do objeto [i], acesse o Google este uso de uso* //* Como o índice aqui é um atributo personalizado, você precisa usar o método de nível DOM2///) para obter o atributo parseint (this.getAttribute ('index')); var offset = 600 * (clickindex - índice); // Este índice é indexanimate (deslocamento); índice = clickIndex; // armazenamento a posição após o clique do mouse e use -o para exibir o DottsShow ();}} container.onMouseOver = STOP; container.onMouseOut = play; play ();} </script> </head> <body> <div id = "contêiner"> <div = "=" = "Left: --600px; src = "img/1.jpg"/> <img src = "img/2.jpg"/> <img src = "img/3.jpg"/> <img src = "img/4.jpg"/> <img src = "img/5.jpg"/> <mi src = "img/2.jpg"/> <img src = "img/3.jpg"/> <img src = "img/4.jpg"/> <img src = "img/5.jpg"/> <img src = "img/1.jpg"/> </div> index = "2"> </span> <span index = "3"> </span> <span index = "4"> </span> <span Índice = "5"> </span> </div> <a href = "javascript :;" id = "prev"> </a> <a href = "javascript :;" id = "Next" >> </a> </div> </body> </html>O exposto acima é o código de carrossel JS simples introduzido 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!