Natives JS zum Erzielen eines nahtlosen Karusselleffekts
|
Native js realisiert den Karusselleffekt (nahtloses Scrollen) zu Ihrer Information. Der spezifische Inhalt ist wie folgt Effektbild:
Code:
<!DOCTYPE html>
<html lang="de">
<!-- Tag07 7-10-14 -->
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<script src="./images1/20.animate.js"></script>
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
li {
Listenstil: keiner;
}
.Fokus {
/*Überlauf: versteckt;*/
Position: absolut;
oben: 100px;
links: 200px;
Breite: 721px;
Höhe: 455px;
Hintergrundfarbe: braun;
}
.vorherige,
.nächste {
Anzeige: keine;
Position: absolut;
oben: 50 %;
Rand oben: -15px;
Breite: 20px;
Höhe: 30px;
Hintergrundfarbe: rgba(0, 0, 0, .3);
Textdekoration: keine;
Farbe: #fff;
Zeilenhöhe: 30px;
Textausrichtung: zentriert;
Schriftgröße: 16px;
Z-Index: 2;
}
.fokus ul {
/* Die Einführung von Animations-JS-Dateien erfordert eine Positionierung*/
Position: absolut;
Breite: 600 %;
}
.fokus ul li {
schweben: links;
}
.vorherige {
links: 0;
Rahmen oben rechts – Radius: 15px;
Rahmen unten rechts – Radius: 15px;
}
.nächste {
rechts: 0;
Rahmen oben links – Radius: 15px;
Rahmen unten links – Radius: 15px;
}
.promo-nav {
Position: absolut;
unten: 10px;
links: 60px;
Breite: 200px;
Höhe: 18px;
Rahmenradius: 9px;
}
.promo-nav li {
schweben: links;
Breite: 10px;
Höhe: 10px;
Hintergrundfarbe: #fff;
Rand: 2px;
Randradius: 50 %;
}
.promo-nav .aktuell {
Hintergrundfarbe: orange;
}
.fokus ul li a img {
Breite: 721px;
Höhe: 455px;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Fokus">
<ul>
<li>
<a href="#" ><img src="images1/focu01.jpg" alt=""></a>
</li>
<li>
<a href="#" ><img src="images1/focu02.jpg" alt=""></a>
</li>
<li>
<a href="#" ><img src="images1/focu03.jpg" alt=""></a>
</li>
<li>
<a href="#" ><img src="images1/focu04.jpg" alt=""></a>
</li>
</ul>
<!-- Linke Taste -->
<a href="javascript:;" class="prev"><</a>
<!-- Rechte Taste -->
<a href="javascript:;" class="nächste">></a>
<ol Klasse="Promo-Navigation">
</ol>
</div>
<Skript>
window.addEventListener('laden', Funktion() {
var Fokus = document.querySelector('.focus');
var prev = document.querySelector('.prev');
var weiter = document.querySelector('.weiter');
var Fokusbreite = Fokus.Offsetbreite;
//Die Maus geht durch focus.addEventListener('mouseenter', function() {
vorheriger Stil.Anzeige = "Block";
nächster.style.display = "Block";
Intervall löschen(Timer);
timer = null; // lösche die Timervariable })
//Die Maus verlässt den Fokus.addEventListener('mouseleave', function() {
vorheriger Stil.Anzeige = "keine";
nächster.style.display = "keine";
Timer = Intervall setzen(Funktion() {
nächster.klick();
}, 2000)
})
//3. Dynamisch kleine Kreise generieren. So viele kleine Kreise generieren, wie Bilder vorhanden sind. var ul = focus.querySelector('ul');
var ol = Fokus.QuerySelector('.promo-nav');
// konsole.log(ul.children.length); 4
für (var i = 0; i < ul.children.length; i++) {
//Erstelle eine li
var li = document.createElement('li');
// Notieren Sie die Indexnummer des aktuellen kleinen Kreises über benutzerdefinierte Attribute li.setAttribute('index', i);
//Nach ol einfügen ol.appendChild(li);
//4. Klicken Sie mit der Maus auf den kleinen Kreis, um seine Farbe zu ändern (fügen Sie die aktuelle Klasse zum kleinen Kreis hinzu und entfernen Sie diese Klasse aus den anderen kleinen Kreisen) (exklusive Idee)
//Binde das Klickereignis direkt ein, während der kleine Kreis generiert wird li.addEventListener('click', function() {
für (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
dieser.Klassenname = "aktuell";
//5. Klicken Sie auf den kleinen Punkt, um das Bild zu verschieben. Die UL wird verschoben.
//Die Distanz, die ul zurücklegt, ist die Indexnummer des kleinen Kreises multipliziert mit der Breite des Bildes. Beachten Sie, dass es sich um einen negativen Wert handelt. //Wenn wir auf ein kleines li klicken, erhalten wir die Indexnummer des aktuellen kleinen li. var index = this.getAttribute('index');
//Wenn wir auf ein bestimmtes li klicken, geben wir die Indexnummer von li an num
Zahl = Index;
//Wenn wir auf ein bestimmtes li klicken, geben wir die Indexnummer von li an, um zu indizieren
Kreis = Index;
konsole.log(index);
animieren(ul, -index * Fokusbreite, );
})
}
//Setze die Farbe des ersten li in ol auf Weiß ol.children[0].className = 'current';
//6. Klonen Sie das erste li und platzieren Sie es hinter ul var first = ul.children[0].cloneNode(true);
ul.appendChild(erstes);
//7. Klicken Sie auf die Schaltfläche rechts, um ein Bild zu scrollen. var num = 0;
var Kreis = 0;
varflag = wahr;
//Rechte Maustaste next.addEventListener('click', function() {
wenn (Flagge) {
flag = false; //Schließen Sie zuerst die Drosselklappe //5. Wenn Sie das zuletzt kopierte Bild erreichen, wird ul schnell auf 0 zurückgesetzt (nahtloses Scrollen).
wenn (num == ul.children.length - 1) {
ul.style.left = 0;
Zahl = 0;
}
Zahl++;
animieren(ul, -num * Fokusbreite, Funktion() {
Flagge = wahr;
});
//8. Klicken Sie auf die Schaltfläche rechts und der kleine Kreis ändert sich entsprechend. Deklarieren Sie eine Variable, um die Änderung des kleinen Kreises zu steuern circle++;
//Wenn der Kreis gleich 4 ist, bedeutet das, dass wir mit dem Klonen des letzten Bildes fertig sind und es wiederherstellen werden, wenn (Kreis == ol.children.length) {
Kreis = 0;
}
// //Lösche die restlichen kleinen Kreisklassennamen// for (var i = 0; i < ol.children.length; i++) {
// ol.children[i].className = '';
// }
// //Lass den aktuellen kleinen Kreis mit dem aktuellen Klassennamen// ol.children[circle].className = 'current';
Kreisänderung();
}
})
//Linke Taste prev.addEventListener('click', function() {
wenn (Flagge) {
Flagge = falsch;
//5. Wenn Sie das zuletzt kopierte Bild erreichen, wird ul schnell auf 0 zurückgesetzt (nahtloses Scrollen).
wenn (num == 0) {
Num = ul.children.length - 1;
ul.style.left = -num * Fokusbreite + 'px';
}
Nummer--;
animieren(ul, -num * Fokusbreite, Funktion() {
Flagge = wahr;
});
//8. Klicken Sie auf die Schaltfläche rechts und der kleine Kreis ändert sich entsprechend. Deklarieren Sie eine Variable, um die Änderung des kleinen Kreises zu steuern circle--;
//Wenn der Kreis kleiner als 0 ist, wird der kleine Kreis in den vierten kleinen Kreis geändert, wenn (Kreis < 0) {
Kreis = ol.Kinder.Länge - 1;
}
// Lösche die restlichen kleinen Kreisklassennamen // for (var i = 0; i < ol.children.length; i++) {
// ol.children[i].className = '';
// }
// Den aktuellen kleinen Kreis belassen, aktueller Klassenname // ol.children[circle].className = 'current';
Kreisänderung();
}
})
Funktion Kreisänderung() {
//Lösche die restlichen Klassennamen des kleinen Kreises für (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
//Den aktuellen kleinen Kreis belassen Aktueller Klassenname ol.children[circle].className = 'current';
}
//10. Diashow automatisch abspielen var timer = setInterval(function() {
nächster.klick();
}, 2000)
})
</Skript>
</body>
</html>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:
|
>>: IIS 7.5 verwendet das URL-Rewrite-Modul, um eine Webseitenumleitung zu erreichen
Artikel empfehlen
Reines CSS, um einen automatischen Rotationseffekt des Karussellbanners zu erzielen
Kommen wir ohne weitere Umschweife direkt zum Cod...
Halbtransparente Bildverarbeitung. Ideen und Code zur Implementierung von halbtransparentem Hintergrund.
Code kopieren Der Code lautet wie folgt: <!DOC...
Einige Funktionen der Verwendung von tcpdump zum Erfassen von Paketen in der Linux-Befehlszeile
tcpdump ist ein flexibles und leistungsstarkes To...
So stellen Sie das Crownblog-Projekt mit Docker in der Alibaba Cloud bereit
Front-End-Projektpaketierung Suchen Sie .env.prod...
Zusammenfassung der DTD-Verwendung in HTML
DTD ist ein Satz grammatikalischer Regeln zur Ausz...
Docker-Container erklärt ausführlich, wie man das Image vereinfacht und die Größe reduziert
Inhaltsverzeichnis 1. Reduzieren Sie die Anzahl d...
MySQL führt mehrere Datenzeilen basierend auf der Funktion group_concat() zusammen
Eine sehr nützliche Funktion group_concat(), im H...
Was tun, wenn Sie Ihr MySQL-Passwort vergessen?
Lösung zum Vergessen des MySQL-Passworts: [root@l...
Detaillierte Erläuterung der Nginx-Prozessverwaltungs- und Neuladeprinzipien
Prozessstrukturdiagramm Nginx ist eine Multiproze...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.10 WinX64 (Win10)
MySQL ist eine relativ einfach zu verwendende rel...
So versetzen Sie JavaScript in den Ruhezustand oder in den Wartezustand
Inhaltsverzeichnis Überblick Überprüfen von setTi...
Probleme und Lösungen bei der Installation und Verwendung von VMware
Die virtuelle Maschine wird verwendet oder es kan...
Docker-Batch starten und alle Container schließen
Im Docker Starten Sie alle Containerbefehle Docke...
CSS, um horizontale Linien auf beiden Seiten des mittleren Textes zu erreichen
1. Die Eigenschaft „vertical-align“ erzielt folge...
JavaScript, um den Effekt des Klickens auf das Untermenü zu erzielen
In diesem Artikel wird der spezifische JavaScript...