JavaScript zum Erzielen eines einfachen Karusselleffekts
Was ist ein Karussell?Karussell: In einem Modul oder Fenster können Sie mehrere Bilder anzeigen, indem Sie auf einem Computer mit der Maus klicken oder auf einem Mobiltelefon mit dem Finger darüberstreichen. Bei diesen Bildern handelt es sich um Karussellbilder, und dieses Modul wird Karussellmodul genannt. So implementieren Sie ein Karussell Wie erstelle ich in js ein Karussell wie das unten gezeigte, das automatisch kleine Punkte entsprechend den Bildern generiert, durch Klicken auf die Pfeile nach links und rechts zum vorherigen oder nächsten Bild springt, alle paar Sekunden automatisch rotiert und Sie durch Klicken auf die kleinen Punkte auch zum angegebenen Bild gelangen können.
HTML-Struktur Zuerst erstellen wir eine HTML-Seite. Die Struktur ist sehr einfach. Wir verwenden ein großes Div, um zwei Divs zu verschachteln und nennen es Slider. Das obere Div wird verwendet, um Bilder aufzunehmen und heißt Slider-Img. Das untere Div ist das Steuerelement, das verwendet wird, um Schaltflächen und kleine Punkte für die oberen und unteren Bilder aufzunehmen. Es heißt Slider-Ctrl.
<!DOCTYPE html>
<html>
<head lang="de">
<meta charset="UTF-8">
<Titel></Titel>
<link rel="stylesheet" href="css/index.css"/>
<script src="../public.js"></script>
<script src="./js/index.js"></script>
</Kopf>
<Text>
<div Klasse="Schieberegler" id="Schieberegler">
<div Klasse="slider-img">
<ul>
<li><a href="#"><img src="images/1.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/4.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/5.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/6.jpg" alt=""/></a></li>
</ul>
</div>
<div Klasse="Schieberegler-Strg">
//Hier automatisch kleine Punkte generieren<span class="prev" id="prev"></span>
<span class="nächste" id="nächste"></span>
</div>
</div>
</body>
</html> CSS Code Der CSS-Code ist sehr einfach und kurz.
* {
Rand: 0;
Polsterung: 0;
}
.Schieberegler {
Breite: 310px;
Höhe: 265px;
Rand: 100px automatisch;
Position: relativ;
Überlauf: versteckt;
}
.slider-img {
Breite: 310px;
Höhe: 220px;
}
ul {
Listenstil: keiner;
}
li {
Position: absolut;
oben: 0;
links: 0;
}
.Schieberegler-Strg {
Textausrichtung: zentriert;
Polsterung oben: 10px;
}
.Schieberegler-Strg-Kon {
Anzeige: Inline-Block;
Breite: 24px;
Höhe: 24px;
Hintergrund: URL (../images/icon.png) keine Wiederholung -24px -780px;
Texteinzug: -99999px;
Rand: 0,5px;
Cursor: Zeiger;
}
.slider-ctrl-con.current {
Hintergrundposition: -24px -760px;
}
.vorherige,.nächste {
Position: absolut;
oben: 40%;
Breite: 30px;
Höhe: 35px;
Hintergrund: URL (../images/icon.png) keine Wiederholung;
}
.vorherige {
links: 10px;
}
.nächste {
rechts: 10px;
Hintergrundposition: 0 -44px;
} JS-Code Sie müssen zunächst eine Bedarfsanalyse durchführen, um Ihre Gedanken zu klären, und dann den Code Schritt für Schritt schreiben. Wir holen uns zuerst die relevanten Elemente und generieren dann entsprechend der Anzahl der Bilder entsprechende kleine Punkte. Da die Bilder übereinander gestapelt sind, platzieren wir die anderen Bilder rechts, um sie auszublenden und nur das erste Bild anzuzeigen. Anschließend muss der erste kleine Punkt zum Leuchten gebracht werden, um sicherzustellen, dass der kleine Punkt und das Bild miteinander verbunden werden. Dann müssen wir uns darüber im Klaren sein, dass durch Klicken auf den rechten Pfeil das nächste Bild angezeigt wird, durch Klicken auf den linken Pfeil das vorherige Bild angezeigt wird, durch Klicken auf den kleinen Punkt das entsprechende Bild angezeigt werden kann und die entsprechenden Bilder aufleuchten müssen. Lassen Sie die Bilder schließlich automatisch rotieren, stoppen Sie die Rotation, wenn Sie die Maus hineinbewegen, und setzen Sie die Rotation fort, wenn Sie die Maus herausbewegen
fenster.onload = funktion(){
// 0 Zugehörige Elemente abrufen // Gesamtcontainer var slider = document.getElementById('slider');
// Sammlung aller Bilder li var imgLiS = slider.children[0].children[0].children;
//Container für Steuertasten var ctrlDiv = slider.children[1];
//Linker Pfeil (vorherige Schaltfläche)
var prev = document.getElementById('prev')
// Pfeil nach rechts (Weiter-Button)
var nächstes = document.getElementById('nächstes')
// Containerbreite var width = slider.offsetWidth;
// Verwenden Sie eine Variable, um den Index des aktuell angezeigten Bildes aufzuzeichnen. var index = 0;
// 1 Generiere entsprechende kleine Punkte entsprechend der Anzahl der Bilder for(var i=imgLiS.length-1;i>=0;i--){
var neuerPunkt = document.createElement('span');
// Notieren Sie die Knotennummer jedes Knotens, damit Sie die Knotennummer kennen, wenn Sie später darauf klicken. newPoint.className = "slider-ctrl-con";
neuerPunkt.innerHTML = i;
// Setze es nach vorne ctrlDiv.insertBefore(newPoint,ctrlDiv.children[0])
// 2 Alle Bilder werden rechts platziert imgLiS[i].style.left = width+"px"
}
// 2 Das Karussell zeigt das erste Bild an imgLiS[index].style.left = 0;
// Alle kleinen Punkte abrufen var ctrlS = ctrlDiv.children;
// 3 Lasse den ersten Punkt aufleuchten light()
// 4 Klicken Sie auf den linken Pfeil, um das vorherige Bild anzuzeigen und den entsprechenden Punkt aufleuchten zu lassen prev.onclick = prevImg;
// 5 Klicken Sie auf den rechten Pfeil, um das nächste Bild anzuzeigen und den entsprechenden Punkt aufleuchten zu lassen next.onclick = nextImg;
// 6 Klicken Sie auf den kleinen Punkt, um ihn aufleuchten zu lassen und das entsprechende Bild anzuzeigen for(var i=0;i<imgLiS.length;i++){
ctrlS[i].onclick = function(){
var num = +this.innerHTML;
wenn(Zahl>Index){
// Ich glaube, das folgende Bild ist rechts imgLiS[num].style.left = width+"px";
// Verschiebe das aktuelle Bild nach links move(imgLiS[index],'left',-width)
// Das Bild, das ich sehen möchte, geht in die Mitte move(imgLiS[num],'left',0)
}
wenn(Zahl<Index){
// Ich glaube, das vorherige Bild ist links imgLiS[num].style.left = -width+"px";
// Verschiebe das aktuelle Bild nach rechts move(imgLiS[index],'left',width)
// Das Bild, das ich sehen möchte, geht in die Mitte move(imgLiS[num],'left',0)
}
// Index aktualisieren
Index = Zahl;
// Den Punkt aufleuchten lassen light()
}
}
// 7 kann das Bild automatisch rotieren: alle 3 Sekunden das nächste Bild ansehen var timer = setInterval(nextImg,3000)
// 8 Bewegen Sie die Maus, um den Karussell-Schieberegler anzuhalten.onmouseenter = function(){
Intervall löschen(Timer)
}
// 9 Bewegen Sie die Maus nach außen, um den Karussell-Slider fortzusetzen.onmouseleave = function(){
Intervall löschen(Timer)
Timer = Intervall festlegen(nächstesBild,3000)
}
// Da das Aufleuchten der Punkte mehrere Male ausgeführt wird, kapseln Sie es in eine Funktion function light(){
für(var i=0;i<imgLiS.length;i++){
ctrlS[i].className = "Schieberegler-Strg-Kon"
}
ctrlS[index].className = "Schieberegler-Strg-Kon aktuell"
}
//Funktion zum Anzeigen des vorherigen Bildes Funktion prevImg(){
var num = index-1;
wenn(Zahl<0){
// Der Mindestindex ist 0. Wenn der Index, den Sie anzeigen möchten, kleiner als 0 ist, ist es das letzte Bild, dh das Bild mit der Länge 1 num = imgLiS.length-1;
}
// Ich denke, das vorherige Bild muss links sein imgLiS[num].style.left = -width+"px";
// Das aktuelle Bild bewegt sich nach rechts move(imgLiS[index],'left',width)
// Verschiebe das Bild in die Mitte move(imgLiS[num],'left',0)
// Nachdem die Bewegung abgeschlossen ist, zeigt der Container das Bild num an // Der Wert im Index, der den aktuellen Index aufzeichnet, wird also zu num
Index = Zahl;
Licht()
}
// Funktion um das nächste Bild anzuzeigen Funktion nextImg(){
varnum = Index + 1;
wenn(num>imgLiS.length-1){
Zahl = 0;
}
// Ich denke, das nächste muss rechts sein imgLiS[num].style.left = width+"px";
// Verschiebe das aktuelle Bild nach links move(imgLiS[index],'left',-width)
// Das nächste Bild, das ich sehen möchte, kommt in die Mitte move(imgLiS[num],'left',0)
// Aktualisiere den Wert des Index index = num;
Licht()
}
} Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
>>: VMware-Konfiguration von Hadoop zur Realisierung eines pseudoverteilten Grafik-Tutorials
Artikel empfehlen
Ein kurzer Vortrag über berechnete Eigenschaften und das Abhören von Eigenschaften in Vue
Inhaltsverzeichnis 1. Berechnete Eigenschaften Sy...
Beispielcode mit Vue-Router in HTML
Einführung in Vue und Vue-Router <script src=&...
Beim Aktualisieren der automatisch inkrementierten Primärschlüssel-ID in MySQL sind Probleme aufgetreten
Inhaltsverzeichnis Warum die Auto-Inkrement-ID ak...
Das mobile Vue-Terminal realisiert den Finger-Gleiteffekt
In diesem Artikelbeispiel wird der spezifische Co...
WeChat Mini-Programm QR-Code-Generierungstool weapp-qrcode Detaillierte Erklärung
WeChat Mini-Programm - QR-Code-Generator Download...
Detaillierte Erklärung der Lösung des Problems des Zusammenführens von Zeilen und Spalten in Tabellen in HTML
Da wir eine Website erstellen wollten, enthielt d...
Stabile Version von MySQL 8.0.18 veröffentlicht! Hash Join ist wie erwartet da
Die stabile Version (GA) von MySQL 8.0.18 wurde g...
Probleme und Lösungen bei Fehler 08001 bei der Verknüpfung mit MySQL in IDEA und keiner Tabellenanzeige nach erfolgreicher Verbindung
Fehler: Connection to blog0@localhost failed. [08...
Methoden und Schritte zum Bereitstellen einer GitLab-Umgebung basierend auf Docker
Hinweis: Es wird empfohlen, dass der Speicher der...
HTML-Tabellen-Tag-Tutorial (46): Tabellenfußzeilen-Tag
Mit dem Tag <tfoot> wird der Stil der Tabel...
Informationen zur Verwendung des Iconfont-Vektorsymbols von Alibaba in Vue
Es gibt viele Importmethoden im Internet, und die...
Zusammenfassung der MySql-Import- und Exportmethoden mit mysqldump
Datenbankdaten exportieren: Öffnen Sie zuerst cmd...
Konfiguration der primären Netzwerk-Portzuordnung für Docker
Portzuordnung Wenn vor dem Start des Docker-Conta...
Lösung für den internen Serverfehler Nginx 500
Als ich heute Nginx verwendete, trat ein 500-Fehl...
Erste Schritte mit Nginx Reverse Proxy
Inhaltsverzeichnis Überblick Die Rolle des Revers...