Eu compartilhei um algoritmo de gráfico de carrossel que muda a hierarquia antes. Hoje, continuo usando a transparência para obter um algoritmo de gráfico de carrossel sem deslocamento.
Lógica de implementação: posicione todas as imagens a serem feitas juntas, ou seja, empilhá -las camadas por camada e use os atributos hierárquicos para ajustar a ordem de imagem correta, definir a transparência da imagem como 0 e, em seguida, fazer a transparência da primeira imagem inicial como 1. O algoritmo específico é o seguinte:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> altere o algoritmo de transparência (clássico) </title> <style media = "screen"> * {margem: 0; preenchimento: 0; } .Wrap {Width: 60%; margem: automático; Posição: relativa; } .Wrap img {width: 100%; Posição: Absoluto; Esquerda: 0; topo: 0; transição: 2s; } .Wrap iMg: nth-child (1) {Position: relativo; } .wrap .follow {width: 150px; Altura: 30px; margem: automático; exibição: flex; Justify-Content: Space Between; } .Wrap .Flow span {width: 10px; Altura: 10px; Radio de fronteira: 50%; borda: 3px cinza sólido; } .wrap. siga span: hover {cursor: pointer; } </style> </ad Head> <body> <div> <img src = "img/01.jpg"/> <img src = "img/02.jpg"/> <img src = "img/03.jpg"/> <img src = "img/04.jpg"/> value = "◀︎"> <input id = "rightbut" type = "button" name = "name" value = "▶ ︎"> <div> <span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </divind> </span> </span> "text> </span> </span> document.QuerySelectorAll ('. Wrap img'); var spans = document.QuerySelectorAll ('. Siga o span'); var esquerdbut = document.getElementById ('esquerdabut'); var à direita = document.getElementById ('Rightbut'); // define a função de parâmetro showImage (index) {for (var i = 0; i <imagens.length; i ++) {vã [i] .index = i; // atributos personalizados, obtenha as imagens de subscrito correspondente [i] .zindex = i; '0'; // atribui toda a transparência da imagem a 0 vãos [i] .style.background = 'Gray'; // Todas as cores dos pontos de Pequim são definidas como pretas} // Atribuindo a transparência da imagem do valor subscrito do parâmetro de entrada para 1 imagens [índice] .style.Opacity = '1'; // atribui a cor de fundo da imagem com o valor do subscrito do parâmetro recebido a vãos brancos [index] .style.background = 'White'; } showImage (0); // Defina inicialmente o estilo da imagem com o valor do subscrito do parâmetro recebido para 0 var count = 1; // Obtenha contador // Defina a função automática do carrossel imagemove () {// se o valor da contagem puder ser divisível por 4, depois a reathing count a 0; if (contagem % 4 == 0) {count = 0; } // Passe o valor da contagem como um parâmetro para a função showImage (); showImage (contagem); count ++; // Execute uma vez +1} // Defina a função imagemove () para ligar uma vez a cada dois segundos e atribuí -lo a imageInitialMove var imageInitialMove = setInterval ('imageMove ()', 2000); // Clique no evento esquerdbut.onClick = function () {// limpe o timer clearInterval (imageInitialMove); // Como a direção é oposta à roda automática, é necessário julgar que o valor da contagem é 0, transferindo -o para 4 e continue a fazer loop se (contagem == 0) {count = 4; } contagem-; showImage (contagem); // chamando a contagem de funções primeiro de -ImageInitialMove = setInterval ('imageMove ()', 2000); } // o direito de correrbut.onClick = function () {clearInterval (imageInitialMove); imageMove (); // porque a direção é a mesma que o carrossel automático, ligue diretamente // relva o timer imageInitialMove = setInterval ('imagemove ()', 2000); } // Clique em Evento para pontos para (var i = 0; i <spans.length; i ++) {vã [i] .OnClick = function () {ClearInterval (imageInitialMove); // Atribua o valor do subscrito do DOT atualmente clicado para contagem count = event.target.index; // Ligue para o showImage da função (contagem); imageInitialMove = setInterval ('imageMove ()', 2000); }} </script> </html>Maravilhoso compartilhamento de tópicos: jQuery Picture Carousel JavaScript Imagem Carousel Bootstrap Picture Carousel
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.