Use JS para realizar el efecto de la imagen del carrusel (ii)

Basado en el artículo anterior que usa JS para implementar el código de efecto de carrusel de imagen (i), se agrega el evento de respuesta de las flechas izquierda y derecha, y hacer clic en las flechas izquierda y derecha también puede hacer que la imagen se desplace:

El código JS es el siguiente:

 Window.Onload = function () {// Inicialización de Carousel var lunbo = document.getElementById ('content'); var imgs = lunbo.getElementsByTagName ('img'); var uls = lunbo.getElementsByTagName ('ul'); var lis = lunbo.getEgnementsByTagname ('li'); document.getElementById ('next'); var prev = document.getElementById ('prev'); var item = 0; // En el estado inicial, un círculo está en el modo resaltado lis [0] .style.fontsize = '26px'; lis [0] .Style.color = '#ffff'; iMgs [0] .Style.dyle.dyle = '' Bloquen ' El orden de las imágenes var pic_index = 1; // carrusel automático. Use pic_time para grabar reproducción, y puede usar ClearInterval () para borrarlo en cualquier momento. var pic_time = setInterval (autoBoFang, 1000); // Función de procesamiento de eventos automático AutoBoFang () {if (pic_index> = lis.length) {pic_index = 0;} picchange (pic_index); pic_index ++;} // carusel manual para (var i = 0; i <lis.length; i ++) {{{ lis [i] .adDeventListener ("mouseover", cambio, falso);} cambio de función (event) {var event = event || window.event; var target = event.target || event.sricleement; VAR Children = Target.ParentNode.Children; para (var i = 0; i <children.length; i ++) {if (target == niños [i]) {picchange (i); }}} // función de conmutación de imagen PicChange (i) {// Deja que no se muestren todas las imágenes, y todos los círculos están en 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';} // deja que la imagen de la imagen de índice seleccionada, y el círculo correspondiente se resalte imgs [i] .style.display = 'bloque'; lis [i] .style.fontSize = '26px'; lis [i] .style.color = '#fff'; } // Cuando el mouse se acerca al área de la imagen, la reproducción automática detiene lunbo.addeventListener ("mouseover", function () {clearInterval (pic_time);}, false); // cuando el mouse se mueve del área de la imagen, la reproducción automática continúa lunbo.addeventlistener ("rOuseout", function () {{) {{) {{{) setInterval (AutoboFang, 1000); 2) {item = 0;} else {item+= 1;} picchange (item);} anterior

Diagrama de reproducción: diagrama de reproducción del mouse que pasa la flecha

Cuando el mouse hace clic en la flecha, la imagen cambiará y el pequeño círculo de abajo también mostrará el efecto de resaltar de la imagen correspondiente.

Resumir:

Se ha logrado el efecto básico del carrusel. Lo que debe hacerse más adelante es simplificar y encapsular el código y mejorar la eficiencia operativa.