Implementierung eines einfachen Karussells auf Basis von JavaScript
|
In diesem Artikel wird der spezifische JavaScript-Code zur Implementierung eines einfachen Karussells zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Ideen zur Implementierung eines JS-Karussells 1. Holen Sie sich zuerst die linken und rechten Schaltflächen der Elementbox HTML-Codeteil<!DOCTYPE html> <html lang="de"> <Kopf> <meta charset="UTF-8"> <meta http-equiv="X-UA-kompatibel" content="IE=edge"> <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0"> <title>Dokument</title> <link rel="stylesheet" href="css/index.css" > <script src="js/index.js"></script> </Kopf> <Text> <div Klasse="Fokus"> <a href="javascript:;" Klasse="Pfeil_r">></a> <a href="javascript:;" Klasse="Pfeil_l"> <</a> <ul> <li> <a href=""><img src="images/focus.jpg" alt=""></a> </li> <li> <a href=""><img src="images/focus1.jpg" alt=""></a> </li> <li> <a href=""><img src="images/focus2.jpg" alt=""></a> </li> <li> <a href=""><img src="images/focus3.jpg" alt=""></a> </li> </ul> <ol Klasse="Kreis"> </ol> </div> </body> </html> CSS-Stilteil
* {
Polsterung: 0;
Rand: 0;
}
li {
Listenstil: keiner;
}
img {
Rand: 0;
vertikale Ausrichtung: oben;
}
A {
Textdekoration: keine;
}
.Fokus {
Position: relativ;
Breite: 721px;
Höhe: 455px;
Rand: 100px automatisch;
Überlauf: versteckt;
}
.fokus ul {
Position: absolut;
oben: 0;
links: 0;
Breite: 600 %;
}
.fokus ul li {
schweben: links;
}
.Pfeil_r,
.Pfeil_l {
Anzeige: keine;
Position: absolut;
oben: 50 %;
transformieren: verschiebeY(-50%);
Breite: 40px;
Höhe: 40px;
Zeilenhöhe: 40px;
Textausrichtung: zentriert;
Schriftgröße: 24px;
Hintergrund: rgba(0, 0, 0, .2);
Farbe: #fff;
Z-Index: 1;
}
.Pfeil_r {
rechts: 0;
}
.Kreis {
Position: absolut;
unten: 10px;
links: 50px;
}
.Kreis li {
schweben: links;
Breite: 8px;
Höhe: 8px;
Rand: 2px durchgezogen rgba(255, 255, 255, .5);
Randradius: 50 %;
Rand: 0 3px;
Cursor: Zeiger;
}
.aktuell {
Hintergrundfarbe: #fff;
}JavaScript-Teil
window.addEventListener('laden', Funktion() {
//Element abrufen var focus = document.querySelector('.focus');
var arrow_r = document.querySelector('.arrow_r');
var arrow_l = document.querySelector('.arrow_l');
var Fokusbreite = Fokus.Offsetbreite;
// Wenn die Maus das Fokusfeld passiert, werden die linken und rechten Schaltflächen angezeigt/ausgeblendet und das Karussell wird angehalten focus.addEventListener('mouseenter', function() {
arrow_r.style.display = "Block";
arrow_l.style.display = "Block";
Intervall löschen(Timer);
Zeitgeber = null;
});
Fokus.addEventListener('mouseleave', Funktion() {
arrow_r.style.display = "keine";
arrow_l.style.display = "keine";
Timer = Intervall setzen(Funktion() {
//Klick-Ereignis aufrufen arrow_r.click();
}, 2000);
});
//Kleine Kreise dynamisch generieren var ul = focus.querySelector('ul');
var ol = Fokus.QuerySelector('.Kreis');
für (var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li');
li.setAttribute('index', i);
ol.appendChild(li);
//Kleiner Kreis Klickereignis li.addEventListener('click', function() {
für (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
var index = this.getAttribute('index');
Zahl = Index;
Kreis = Index;
dieser.Klassenname = "aktuell";
animieren(ul, -index * Fokusbreite);
})
}
ol.children[0].className = "aktuell";
//Klone das erste Bild und füge es in das letzte ein var fis = ul.children[0].cloneNode(true);
ul.appendChild(fis);
//Rechtsklick-Ereignis var num = 0;
var Kreis = 0;
arrow_r.addEventListener('klicken', function() {
wenn (num === ul.children.length - 1) {
ul.style.left = 0;
Zahl = 0;
}
Zahl++;
animieren(ul, -num * Fokusbreite);
Kreis++;
wenn (Kreis === ul.children.length - 1) {
Kreis = 0;
}
für (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[Kreis].className = "aktuell";
});
//Linksklick-Ereignis arrow_l.addEventListener('click', function() {
wenn (num == 0) {
Num = ul.children.length - 1;
ul.style.left = -num * Fokusbreite + 'px';
}
Nummer--;
animieren(ul, -num * Fokusbreite);
Kreis--;
Kreis = Kreis < 0? ol.children.length - 1 : Kreis;
//Funktion circleChange() aufrufen;
});
//Lösche den aktuellen Klassennamen der verbleibenden kleinen Kreise function circleChange() {
für (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
//Den aktuellen Klassennamen des aktuellen kleinen Kreises belassen ol.children[circle].className = 'current';
}
//Animationsfunktion Funktion animate(obj, target, callback) {
Intervall löschen(Objekt.Timer);
obj.timer = setzeIntervall(Funktion() {
var Schritt = (Ziel – Objekt.OffsetLeft) / 10;
Schritt = Schritt > 0? Math.ceil(Schritt) : Math.floor(Schritt);
wenn (Objekt.OffsetLeft == Ziel) {
Intervall löschen(Objekt.Timer);
Rückruf && Rückruf();
}
obj.style.left = obj.offsetLeft + Schritt + 'px';
}, 15);
}
//Karussell automatisch abspielen var timer = setInterval(function() {
//Klick-Ereignis aufrufen arrow_r.click();
}, 2000);
});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:
|
<<: So bereinigen Sie regelmäßig Bilder, die über Jenkins „None“ sind
>>: So beheben Sie den 2002-Fehler bei der Installation einer MySQL-Datenbank in der Alibaba Cloud
Artikel empfehlen
Einfaches Anwendungsbeispiel für eine rekursive Vue-Komponente
Vorwort Ich glaube, dass viele Studenten bereits ...
Javascript zum Erzielen eines Trommeleffekts
In diesem Artikel wird der spezifische Code von J...
Einführung in die Verwendung des Select-Optgroup-Tags in HTML
Gelegentlich muss ich ausgewählte Inhalte gruppier...
So verwenden Sie VirtualBox zum Erstellen einer lokalen virtuellen Maschinenumgebung auf dem Mac
1. Big Data und Hadoop Um Big Data zu studieren u...
Detaillierte Schritte zur Implementierung der Excel-Importfunktion in Vue
1. Front-End-geführte Implementierungsschritte De...
Beheben Sie das Problem, dass einige Konfigurationsdateien in /etc nach dem Neustart des Docker-Containers zurückgesetzt werden
1. Die drei Dateien /etc/hosts, /etc/resolv.conf ...
Zusammenfassung von vier Situationen gemeinsamer Abfragen zwischen zwei Tabellen in MySQL
Um umfassendere Ergebnisse zu erhalten, müssen wi...
Realisieren Sie einen super coolen Wasserlichteffekt auf Leinwandbasis
In diesem Artikelbeispiel erfahren Sie den spezif...
So zeigen Sie den Startparameterbefehl „Docker Run“ an (empfohlen)
Verwenden Sie runlike, um die Docker Run-Startpar...
Installationsschritte von Docker-CE auf dem Raspberry Pi 4b Ubuntu19-Server
Das Raspberry Pi-Modell ist 4b, 1 G RAM. Das Syst...
Optimierungsmethoden, wenn MySQL zu viel CPU beansprucht (unbedingt lesen)
Wenn MySQL zu viel CPU beansprucht, wo sollten wi...
Vue realisiert Bildwechseleffekt
In diesem Artikelbeispiel wird der spezifische Co...
Analyse der MySql CURRENT_TIMESTAMP-Funktion anhand eines Beispiels
Beim Erstellen eines Zeitfelds STANDARD CURRENT_T...
HTML-Textfeld (Text) ist nicht in mehreren Möglichkeiten verfügbar, um schreibgeschützt zu erreichen
Methode 1: <input id= "File1" type= &...
Eine Aufzeichnung der Fallstricke des Lebenszyklus von WeChat-Applet-Komponenten
Der Komponentenlebenszyklus ist normalerweise der...