Basierend auf dem vorherigen Artikel, der JS verwendete, um den Image Carousel Effect Code (i) zu implementieren, wird das Antwortereignis von linken und rechten Pfeilen hinzugefügt, und das Klicken auf die linken und die rechten Pfeile kann auch das Bild scrollen:
Der JS -Code lautet wie folgt:
window.onload = function () {// Carousel Initialisierung var lunbo = document.getElementById ('content'); var imgs = lunbo.getElementsByTagName ('img'); var uls = lunbo.getElementsByTagnname ('ul'); var lis = lunbo.GetElementsByTagname ('li'; document.getElementById ('next'); var prev = document.getElementById ('prev'); var item = 0; // Im Anfangszustand befindet sich ein Kreis im Highlight -Modus lis [0] .Style.Fontsize = '26px'; Ändern Sie automatisch die Reihenfolge der Bilder var pic_index = 1; // Automatisches Karussell. Verwenden Sie PIC_Time, um die Wiedergabe aufzunehmen, und Sie können ClearInterval () jederzeit löschen. var pic_time = setInterval (autobofang, 1000); // Autoplay -Ereignisverarbeitungsfunktion autobofang () {if (pic_index> = lis.Length) {pic_index = 0;} picchange (pic_index); pic_index ++;} // Handbuch Carousel für (var i = 0; lis [i] .AdDeVentListener ("mouseover", ändere, false);} Funktion ändern (Ereignis) {var event = event || window.event; var target = event.target || event.srcelement; 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'; } // Wenn sich die Maus näher am Bildbereich bewegt, stoppt die automatische Wiedergabe lunbo.adDeventListener ("Mausover", function () {ClearInterval (pic_time);}, false); // Wenn sich die Maus aus dem Bildbereich bewegt, fährt die automatische Playback fort. setInterval (autobofang, 1000); 2) {item = 0;} else {item+= 1;} picChange (item);} pre.adDeDEventListener ("klicken", movePrev, false);Fortpflanzungsdiagramm: Fortpflanzungsdiagramm der Maus, die den Pfeil passt
Wenn die Maus auf den Pfeil klickt, ändert sich das Bild und der kleine Kreis unten zeigt auch den Hervorhebungseffekt des entsprechenden Bildes an.
Zusammenfassen:
Der grundlegende Karussell -Effekt wurde erreicht. Später müssen erledigt werden, um den Code zu vereinfachen und zu verkapulieren und die betriebliche Effizienz zu verbessern.