1. Principio de implementación
(1) Coloque todas las imágenes en un contenedor principal Div, y establezca la apariencia y la ocultación de las imágenes a través del atributo de pantalla;
(2) El diagrama del carrusel se divide en carrusel manual y carrusel automático;
El enfoque del carrusel manual es hacer clic en el pequeño círculo debajo de la imagen cada vez que hace clic en ella, obtener su número de índice y dejar que la imagen con el número de índice correspondiente se muestre, y el pequeño círculo en este momento se resalta;
Carrusel automático: use el temporizador setInterval () para reproducir la imagen cada vez.
(3) Todos los conocimientos básicos: operación DOM, temporizador, aplicación de eventos.
2. Diseño de la página de la imagen del carrusel:
<div id = "content"> <!-Total Parent Container-> <div> <!-Container Contining Pictures-> <div> <img src = "./ img/lunbo1.jpg"> </div> <div> <img src = "./ img/lunbo2.jpg"> </div> <iv> <img src = "./ img/lunbo3.jpg"> </div> <!-círculo de indicación debajo de la imagen-> <ul> <li id = 'pic1'> ● </li> <li id = 'pic2'> ● </li> </ul> <!-Cerrar las flechas de la izquierda y la derecha de la imagen hacia atrás y hacia adelante-> <a Href = "#"> </sport> <sps> <sps> href = "#"> <span>> </span> </a> </div>
3. Diagrama CSS Style of Carousel:
#content {ancho: 100%; altura: 500px; posición: relativo;}. Carusel-inner {posición: relativo; ancho: 100%; desbordamiento: oculto; Altura: 500px; } .carusel-inner> .item> img {display: block; Línea de altura: 1; Z-índice: 1;}. Indicadores de carrusel {posición: Absolute; Bottom: 10px; Izquierda: 45%; Index Z: 2; Tipo de estilo listado: Ninguno;}. Indicadores de carrusel Li {Display: en línea; cursor: pointer; z-índice: 2;}. activo1 {font-size: 28px; color: #fff;}. Carousel-Control {Position: Absolute; Text-Decoration: Ninguno; Color: #999; Font-Weight: Bold; Opacity: .5; Font-Size: 40px; Z-Index: 3;}. Carrusel-Control: Hover {Color: FFF; Text-Decoration: Ninguno; Opacidad: .9; Outline: Ninguno; Font-Size: 42px;}. Prev {Top: 30%; Izquierda: 20px; } .next {top: 30%; derecha: 20px;}4. Código de implementación de JS para el diagrama de carrusel:
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.getElementsByTagName ('li'); // En el estado inicial, un círculo está en el modo resaltado lis [0] .Style.FontSize = '26px'; lis [0] .Style.color = '#fff'; // Define a Variable a la variable a la variable a la variable a la variable a la variable de la variable pic_index = 1; // carrusel automático. Use pic_time para grabar reproducción, puede usar ClearInterval () para borrarlo en cualquier momento. var pic_time = setInterval (autoBoFang, 3000); // Manual Carousel para (var i = 0; i <lis.length; i ++) {lis [i] .adDeventListener ("mouseOver", cambio, falso);} cambio de funciones (event) {var event = event || window.event; var target.target || event.srcelement; 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';} // Sea que se muestre la imagen del índice seleccionada, y el círculo correspondiente se resalta imgs [i] .style.display = 'bloque'; lis [i] .style.fontSize = '26px'; lis [i] .style.color = '#fff'; } // Función de procesamiento de eventos automático AutoBoFang () {if (pic_index> = lis.length) {pic_index = 0;} change1 (pic_index); pic_index ++;} // eventos en la conversión de la función de reproducción automática cambie1 (index) {picchange (índice); // mueves de ratón en la etiqueta ul, jugada la imagen de la imagen de la imagen ULS [0] .AdDeventListener ("Mouseover", pausa, falso); // Mouse se mueve la etiqueta UL, reproduce automáticamente la imagen continúa ULS [0] .adDeventListener ("Mouseout", Go, False);} // Reproduce la función de pausa PAUSA (Event) {VAR Event = Event || Window.event; EVENT; Target = Event.Target || Event.SrCelement; Switch (Target.id) {Case "Pic1": ClearInterval (pic_time); Break; Case "Pic2": ClearInterval (pic_time); break; case "pic3": clearInterval (pic_time); break;}} // Función continua de imagen de reproducción automática GO (Event) {var Event = Event || Window.event; var Target = Event.target || Event.srCelement; switch (target.id) {case "pic1": pic_index = 1; pic_time = setInterval (autobofang, 3000); ruptura; caso "pic2": pic_index = 2; pic_time = setInterval (autobofang, 3000); ruptura; caso "pic3": pic_index = 3; pic_time = setInterval (autobofang, 3000); break;}}}5. Imagen de reproducción:
6. Problemas y deficiencias encontrados
Problema: cuando el mouse se mueve hacia la etiqueta UL por primera vez, la imagen automática del carrusel se detiene, el mouse se mueve y el carrusel automático continúa, pero a medida que la operación se está ejecutando, la imagen del carrusel cambia más rápido y más rápido, y haciendo clic en la etiqueta UL ya que ya no más ya funciona.
Causa del problema: cuando el temporizador se usa nuevamente después de detener el carrusel, el valor no se asigna a PIC_TIME para grabar, por lo que el mouse no se mueve nuevamente a la etiqueta UL para borrar el temporizador. Por lo tanto, hacer clic en la etiqueta UL nuevamente no puede pausar la reproducción automática del carrusel, y la velocidad se está volviendo cada vez más rápida.
Inadecuación: no se ha logrado el efecto de desplazamiento de realización como la tabla de carrusel Taobao, y el efecto indicador de las flechas izquierda y derecha no se ha completado. Estos continuarán aprendiendo en la etapa posterior, mejorar y compartir.