1. Implementierungsprinzip
(1) Legen Sie alle Bilder in einen übergeordneten Container -Div und setzen Sie das Aussehen und das Verstecken der Bilder durch das Anzeigeattribut.
(2) das Karusselldiagramm ist in manuelles Karussell und automatisches Karussell unterteilt.
Der Schwerpunkt des manuellen Karussells liegt auf dem kleinen Kreis unterhalb des Bildes, wenn Sie darauf klicken, seine Indexnummer abrufen und das Bild mit der entsprechenden Indexnummer angezeigt werden, und der kleine Kreis zu diesem Zeitpunkt wird hervorgehoben.
Automatisches Karussell: Verwenden Sie das Timer setInterval (), um das Bild jedes Mal abzuspielen.
(3) Alle Grundkenntnisse: DOM -Betrieb, Timer, Ereignisanwendung.
2. Carousel Bilderseitenlayout:
<div id = "content"> <!-Totaler übergeordneter Container-> <div> <!-Container, der Bilder enthält-> <div> <img src = "./ img/lunbo1.jpg"> </div> <div> <img src = "./ img/lunbo2.jpg"> </div> <img> <img> <img> <img> <img> <img> <img> <img> <img src="./img/lunbo3.jpg"></div><!-- Indication circle below the picture --><ul><li id='pic1'>●</li><li id='pic2'>●</li></ul><!-- Scroll the left and right arrows of the picture back and forth --><a href="#"><span></span></a><a href = "#"> <span >> </span> </a> </div>
3. CSS -Stil des Karusselldiagramms:
#Content {Breite: 100%; Höhe: 500px; Position: relativ;}. Karussellinner {Position: relativ; Breite: 100%; Überlauf: versteckt; Höhe: 500px; } .Carousel-innere> .Item> img {display: block; Linienhöhe: 1; Z-Index: 1;}. Karussell-Indikatoren {Position: absolut; unten: 10px; links: 45%; Z-Index: 2; Cursor: Zeiger; Z-Index: 2;}. Active1 {Schriftgröße: 28px; Farbe: #fff;}. Carousel-Control {Position: Absolute; Textdekoration: Keine; Farbe: #999; Schriftgewicht: Fett; Opazität: .5; Font-Size: 40px; Z-Index: 3;}. Carousel-Control: Hover {Farbe: fff; Textdekoration: Keine; Opazität:. links: 20px; } .Next {top: 30%; rechts: 20px;}4. JS Implementierungscode für Karusselldiagramm:
window.onload = function () {// Carousel Initialisierung var lunbo = document.getElementById ('Inhalt'); var imgs = lunbo.getElementsByTagName ('img'); var uls = lunbo.getElementsByTagName ('ul'); var lis = lunbo.getElementsByTagName ('li'); // Im Ausgangszustand befindet sich ein Kreis im Highlight -Modus lis [0] .Style.fontsize = '26px'; lis [0]. Karussell var pic_index = 1; // Automatisches Karussell. Verwenden Sie PIC_Time, um die Wiedergabe aufzunehmen. Sie können ClearInterval () jederzeit löschen. var pic_time = setInterval (autobofang, 3000); // manuelles Karussell für (var i = 0; i <lis.Length; i ++) {lis [i] .AdDeVentListener ("Mouseover", Change, False); var Kinder = Ziel.Parentnode.Children; für (var i = 0; i <children.Length; i ++) {if (target == Kinder [i]) {picchange (i); }}} // Bildschaltfunktion Funktion Picchange (i) {// Lassen Sie alle Bilder nicht angezeigt, und alle Kreise sind im normalen Stil für (var j = 0; j <imgsgth; j ++) {imgs [j] .style.display = 'None'; lis [j] .Style.fontsize = '24px'; lis [i] .style.fontSize = '26px'; lis [i] .style.color = '#fff'; }//Autoplay event processing function autobofang(){if(pic_index >= lis.length){pic_index = 0;}change1(pic_index);pic_index++;}//Events in the conversion of the automatic playback image function change1(index){ picChange(index);//Mouse moves into the ul tag, automatically plays the picture pause uls [0] .AddeventListener ("Mausover", Pause, False); // Maus bewegt das UL -Tag, das das Bild automatisch abspielt, fährt ULS [0] .AdDEventListener ("Mausout", Go, False);} // auto die Pause -Funktion Pause (Ereignis) {var Ereignis = Ereignis = || Window. 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;}} // automatisches Bild Continuing Function Go (Ereignis) {var event = Ereignis || window.event; var target = event.target || Event.srcelement; Switch (target.id) {case "pic1": pic_index = 1; pic_time = setInterval (autobofang, 3000); break; case "pic2": pic_index = 2; pic_time = setInterval (autobofang, 3000); break; case "pic3": pic_index = 3; pic_time = setInterval (autobofang, 3000); break;}}}5. Reproduktionsbild:
6. Probleme und Mängel angetroffen
Problem: Wenn sich die Maus zum ersten Mal in das UL -Tag bewegt, stoppt das automatische Karussellbild, die Maus bewegt sich und das automatische Karussell fährt fort, aber wenn der Betrieb läuft, ändert sich das Carousel -Bild immer schneller und es funktioniert nicht mehr auf das UL -Tag zu klicken. Zu diesem Zeitpunkt funktioniert nicht mehr.
Ursache des Problems: Wenn der Timer nach dem Stoppen des Karussells erneut verwendet wird, wird der Wert nicht für die Aufzeichnung von pic_time zugeordnet, sodass die Maus nicht erneut auf das UL -Tag verschoben wird, um den Timer zu löschen. Wenn Sie daher erneut auf das UL -Tag klicken, kann die automatische Karussell -Wiedergabe nicht pausieren, und die Geschwindigkeit wird immer schneller und schneller.
Unzulänglichkeit: Der Effekt der No-real-Scrolling wie das Taobao-Karusselldiagramm wurde nicht erreicht, und der Indikatoreffekt der linken und rechten Pfeile wurde nicht abgeschlossen. Diese werden weiterhin im späteren Stadium, sich verbessern und teilen.