Os diagramas de carrossel ainda são relativamente comuns em aplicativos futuros e podem ser implementados sem muita linha de código. Mas se você dominar apenas o conhecimento básico do JS, como pode usar métodos lógicos menores e simples para alcançá -lo? Aqui estão algumas práticas diferentes:
1. Use o método de deslocamento para alcançar
Primeiro, podemos adicionar uma div ao corpo e definir a largura como uma porcentagem (página adaptativa). Se a proporção for específica de cuja porcentagem é relativa, faremos isso de acordo com as necessidades. Não vou dizer muito aqui. Coloque a imagem na div.
Em segundo lugar, a peça de estilo define todas as tags IMG como absoluto para facilitar o posicionamento
Finalmente, a parte do JS fala sobre a lógica, definindo duas matrizes vazias. A primeira matriz é usada para salvar a imagem inicial exibida na página e a imagem esperando para entrar, e a segunda matriz salva as n imagens restantes. Suponha que essas duas matrizes estejam definidas como: waittoshow = []; e Goout = []; waittoshow.shift (); Se a primeira imagem for chamada Showfirst, e o tempo de deslocamento e movimento estará definido para a imagem Showfirst. Após a conclusão da execução, coloque o showfirst na cauda do Goout: Goout.push (showfirst); Neste momento, o 0º elemento da matriz Waittoshow se torna a segunda foto original a ser exibida. Defina o tempo de deslocamento e movimento para esta imagem waittoshow [0], e coloque a primeira imagem do elemento da matriz de Goout e coloque -a na cauda da matriz Waittoshow para garantir que a matriz Waittoshow seja sempre uma imagem exibida e a imagem a ser exibida. Dessa forma, as duas matrizes formam um loop para concluir a implementação da imagem do carrossel. A lógica reversa é a mesma (porque a lógica é muito complicada, não é recomendada aqui)
2. O método de usar o nível da hierarquia para alterar a imagem superior (esse método não possui ações de deslocamento, mas a lógica é muito simples e prática)
É mais intuitivo codificar diretamente: basicamente toda linha tem comentários
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> Diagrama de carrossel (adaptativo flash) </title> <style media = "screen">* {margin: 0; padding: 0;}. absolute;/*z-index: 10;*/}input {border: 1px solid lightgray;width: 50px;height: 30px;background: red;border-radius: 5px;font-size: 20px;}</style></head><body><div><img src="img/01.jpg" /><img src="img/02.jpg" /> <img src = "img/03.jpg"/> <img src = "img/04.jpg"/> </div> <input type = "button" id = "butleft" name = "name" value = "◀︎"> <input Type = "" id = "butright" name = "name" "=" "◀︎"> <input Type = "" id = "butright" name = "name" "=" = "◀︎"> <input Type = "" Id = "Butright" Nome = "Nome" "=" " type = "text/javascript"> // Obtenha o elemento imagens para gerar uma matriz de string. A matriz da string não pode executar a emenda de push POP ou outras operações //, portanto, precisa restaurar seu valor em uma matriz, com a definição posteriormente var images = document.getElementsByTagName ('img'); var butleft = document.getElementById ('butleft'); varriunhed = document.getElementById (', mas a popa sweets) // sweet sweet) // sweet sweet sweet) // sefesa de seleto (' Butleft '); 1000; // Obtenha uma matriz vazia para armazenar os elementos da string nas imagens var imagens = []; // para loop é usado para atribuir valores à matriz de imagem e alterar o nível de elementos na matriz para (var i = 0; i <imagens.Length; i ++) {imagess [i] = imagens i]; Quanto maior a imagem, quanto maior a configuração de nível, então -i, para que as imagens sejam da primeira e da segunda figuras em ordem ... para baixo na sequência currentImage.style.zindex = -i;} // Defina a contagem do contador, execute um evento de clique (esquerda ou direita) mais 1Var Count = 0; = Imagess.shift (); // Defina um nível para o elemento de imagem pop, ou seja, -1000 + contagem, //, tornando o nível o menor em comparação com outros elementos, a imagem apareceu na cabeça da matriz será exibida na parte inferior do show. Adicione 1, não considere o valor específico, basta clicar em Evento mais 1 contagem ++;} // Clique no evento à direita Butright.OnClick = function () {// coloca um elemento da cauda das imagens e atribua -o para mostrar o Showfirst Showfirst = Imagess.pop (); = índice+contagem; // Após o nível mudar, insira -o na cabeça da matriz Imagess Images.UnShift (Showfirst); // Clique uma vez para adicionar 1Count ++;} </script> </html>O artigo de leitura obrigatória acima sobre o JS básico (implementação simples do clique em eventos carrossel) é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.