Os exemplos deste artigo compartilham com você o efeito do JS para realizar o efeito de comutação de imagem para sua referência. O conteúdo específico é o seguinte
Use JS para perceber o efeito de clicar em botões e alternar imagens:
<div id = "box> <div id =" img_box "> <img src =" ../ raw/b1.jpg "> <img src =" ../ raw/b2.jpg "> <img src =" ../ raw/b3.jpg "> <img src =" ..//b4.jp.jpg "> id = "Right"> </div> </div>
Estrutura: use uma divisão de largura fixa e altura para fazer o recipiente mais externo, defina o transbordamento como oculto,
Em seguida, a camada interna img_box define a largura para quatro vezes a largura da caixa e a altura é a mesma. Ou seja, o img_box contém quatro IMGs, mas apenas um visível é. Os dois divs, à esquerda e à direita abaixo, atuam como botões para obter cliques para trocar de imagens. A troca de imagens significa alterar o atributo esquerdo do img_box, para que o img_box deve definir a posição como absoluta. Por conveniência, a posição da caixa está definida como relação, portanto, img_box está posicionado em relação à caixa. Quatro imagens definem flutuação para a esquerda, com a mesma largura e altura que a caixa.
Código CSS:
*{margem: 0; preenchimento: 0;}. Caixa {largura: 800px; Altura: 400px; margem: 20px automático; Posição: relativa; Overflow: Hidden;}. img_box {altura: 400px; Largura: 3200px; Posição: Absoluto; -moz-transição: 0,5s; -Webkit-transição: 0.5s;} img {width: 800px; Altura: 400px; float: esquerda;}. switch {width: 200px; Altura: 100%; Posição: Absolute;}#esquerda {esquerda: 0px; Top: 0px; Antecedentes: -Moz-linear-gradiente (esquerda, RGBA (84, 84, 84, 0,50), RGBA (20%, 20%, 20%, 0)); Antecedentes: -Webkit-gradiente-linear (esquerda, RGBA (84, 84, 84, 0,50), RGBA (20%, 20%, 20%, 0));}#direita {direita: 0px; Top: 0px; Antecedentes: -Moz-linear-gradiente (esquerda, RGBA (20%, 20%, 20%, 0), RGBA (84, 84, 84, 84, 0,5)); Antecedentes: -Webkit-gradiente linear (esquerda, RGBA (20%, 20%, 20%, 0), RGBA (84, 84, 84, 84, 0,5));}#esquerda: hover {Antecedentes: -Moz-Linear-Gradient (esquerda, RGBA (0, 0, 0,0.5), RGMoz (RGBA (esquerda, RGBA (0, 0, 0,0.5), RG-linear (esquerda, RGBA (0, 0, 0,0.5), RgBa (RGBA, 0,5%; Antecedentes: -Moz-linear-gradiente (à esquerda, RGBA (0, 0, 0,0,5), RGBA (20%, 20%, 20%, 0));}#direita: Hover {Background: -moz-linear-gradiente (esquerda, RGBA (20%, 20%, 20%, 0), RGBA (0, 0, 0, 0,0.0.0. Antecedentes: -Webkit-gradiente linear (esquerda, RGBA (20%, 20%, 20%, 0), RGBA (0, 0, 0,0,5));}São adicionados as propriedades esquerda e direita da cor do fundo e do gradiente de transparência, apenas o navegador do Firefox e o navegador WebKit são adicionados. Além disso, alguns navegadores do IE são núcleos duplos do IE e Webkit, como 360 Secure Browser
Antecedentes: -Moz-linear-gradiente (esquerda, RGBA (84, 84, 84, 0,50), RGBA (20%, 20%, 20%, 0));
Antecedentes: -Webkit-gradiente linear (esquerda, RGBA (84, 84, 84, 0,50), RGBA (20%, 20%, 20%, 0));
Para obter transições suaves durante a troca, a propriedade de transição é adicionada:
-moz-transição: 0,5s;
-Webkit-transição: 0,5s;
Código JS:
var box; var count = 1; window.onload = function () {box = document.getElementById ("img_box"); var esquerdo = document.getElementById ("esquerda"); var à direita = document.getElementById ("direita"); left.addeventListener ("clique", _ esquerda); Right.AddeventListener ("Clique", _ direita); document.body.addeventListener ("mouseOver", demonstração);} função _right () {var des = 0; if (contagem <4) {dis = count*800; } else {dis = 0; contagem = 0; } box.style.left = "-"+dis+"px"; count+= 1;} função _left (event) {var dis = 0; if (contagem> 1) {dis = (2-conting)*800; } else {dis = -3*800; contagem = 5; } box.style.left = dis+"px"; contagem- = 1;}Use a contagem de variáveis globais para registrar a imagem atualmente exibida. Ao clicar no botão de alternância, calcule qual imagem deve ser exibida de acordo com a contagem e calcule e defina o atributo esquerdo do img_box.
O exposto acima é o código para implementar efeitos de comutação de imagem por JS introduzidos em você. Espero que isso possa ajudá -lo a alcançar os efeitos de comutação de imagem.