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
Warum brauchen wir Map, wenn wir in JavaScript bereits Object haben?
Inhaltsverzeichnis 1. Behandeln Sie Objekte nicht...
Vollbild-Drag-Upload-Komponente basierend auf Vue3
In diesem Artikel wird hauptsächlich die Vollbild...
Ubuntu 16.04 mysql5.7.17 öffnet Remote-Port 3306
Aktivieren Sie den Remotezugriff auf MySQL MySQL-...
Tiefgreifendes Verständnis der CSS @font-face-Leistungsoptimierung
In diesem Artikel werden hauptsächlich allgemeine...
Verwenden von Vue3 (Teil 1) Erstellen eines Vue CLI-Projekts
Inhaltsverzeichnis 1. Offizielle Dokumentation 2....
Beispielanalyse der MySQL-Benutzerrechteverwaltung
Dieser Artikel beschreibt das Beispiel der MySQL-...
Detaillierte Untersuchung der MySQL-Mehrversions-Parallelitätskontrolle MVCC
MVCC MVCC (Multi-Version Concurrency Control) ist...
So reparieren Sie beschädigte MySQL-Datenbankdateien schnell mit den Tools myisamchk und mysqlcheck
Da der Festplattenspeicher der Server-Datenbank v...
Installieren Sie Ubuntu 18 ohne USB-Laufwerk unter Windows 10 mit EasyUEFI
1. BIOS überprüfen Überprüfen Sie zunächst, in we...
Vue3 + TypeScript-Entwicklungszusammenfassung
Inhaltsverzeichnis Vue3 + TypeScript lernen 1. Um...
So implementieren Sie die Vorschaufunktion zum Wechseln von Bildern mithilfe der Größenänderung
Wichtige Punkte Mit der CSS-Eigenschaft „Größe än...
Vue verwendet Split, um die universelle Drag-and-Slide-Partitionspanel-Komponente zu kapseln
Inhaltsverzeichnis Vorwort Start Grundlegendes La...
Eine kurze Diskussion über benutzerdefinierte VUE-Uni-App-Komponenten
1. Übergeordnete Komponenten können Daten über Re...
Implementierung eines Crawler-Scrapy-Image, das von Dockerfile basierend auf Alpine erstellt wurde
1. Laden Sie das Alpenbild herunter [root@DockerB...
Tutorial zu HTML-Formular-Tags (1):
Formulare sind eine wichtige externe Form zur Imp...