Com base no artigo anterior usando o JS para implementar o Código do Efeito do Carrossel da Imagem (i), o evento de resposta das setas esquerda e direita é adicionada e clicar nas setas esquerda e direita também pode fazer o rolagem de imagem:
O código JS é o seguinte:
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.getElementElementsByAgNementsby ('Ul'); document.getElementById ('prev'); var item = 0; // No estado inicial, um círculo está no modo de destaque lis [0] .style.fontsize = '26px'; lis [0] .style.color = '#fff'; imgs [0] .style.athis_ter) 1; // carrossel automático. Use pic_time para gravar a reprodução e você pode usar o clearInterval () para limpá -lo a qualquer momento. var pic_time = setInterval (AutoBofang, 1000); // Função de processamento de eventos de AutoPlay AutoBofang () {if (pic_index> = lis.length) {pic_index = 0;} picchange (pic_index); pic_index+; lis [i] .AddeventListener ("mouseOver", alteração, false);} alteração da função (event) {var event = event || window.event; var Target = event.Target || event.srceLement; 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 exibição da imagem de índice selecionada e o círculo correspondente é destacado imgs [i] .style.display = 'bloco'; lis [i] .style.fontsize = '26px'; lis [i] .style.color = '#fff'; } // Quando o mouse se aproxima da área da imagem, a reprodução automática interrompe Lunbo.addeventListener ("MouseOver", function () {ClearInterval (pic_time);}, false); // Quando o mouse se move para fora da área da imagem, a reprodução automática continua lunbo.adDeVentListener " setInterval (AutoBofang, 1000); 2) {item = 0;} else {item+= 1;} picchange (item);} prev.addeventListener ("clique", moveprev, false); função moveprev () {if (item == 0) {item = 2;} else {item 1;} picchange (}}Diagrama de reprodução: diagrama de reprodução do mouse que passa pela seta
Quando o mouse clicar na seta, a imagem mudará e o pequeno círculo abaixo também exibirá o efeito de destaque da imagem correspondente.
Resumir:
O efeito básico do carrossel foi alcançado. O que precisa ser feito mais tarde é simplificar e encapsular o código e melhorar a eficiência operacional.