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
So implementieren Sie eine geplante automatische Sicherung von MySQL unter CentOS7
Das Schönste, was in einer Produktionsumgebung pa...
Tutorial zur Installation des neuesten MySQL 8.0.18 mithilfe eines komprimierten Pakets unter Win10 64-Bit (mit Bildern und Text)
WIN10 64-Bit installieren Sie das neueste MySQL8....
Docker konfiguriert den Speicherort lokaler Images und Container
Verwenden Sie den Befehl „Find“, um Dateien zu fi...
Ajax löst domänenübergreifende Probleme durch Festlegen eines CORS-Antwortheaders, um eine domänenübergreifende Fallstudie zu erreichen
1. Legen Sie den CORS-Antwortheader fest, um domä...
Zusammenfassung zum Erlernen von HTML-Tags und Grundelementen
1. Elemente und Tags in HTML <br />Ein Elem...
Vollständiger Vue-Code zur Implementierung der Single-Sign-On-Steuerung
Hier ist zu Ihrer Information eine Vue-Single-Sig...
Detaillierte Schritte zum Erweitern der LVM-Festplatte unter Linux
1. Fügen Sie eine Festplatte hinzu 2. Überprüfen ...
SVN-Installation und grundlegende Bedienung (grafisches Tutorial)
Inhaltsverzeichnis 1. Was ist SVN? 2. Methoden zu...
So zeigen Sie eine PDF-Datei mit pdfjs in vue in der Vorschau an
Inhaltsverzeichnis Vorwort denken Analysieren und...
Detaillierte Erklärung zur Verwendung von Standard in MySQL
NULL- und NOT NULL-Modifikatoren, DEFAULT-Modifik...
Erläuterung von JavaScript-Mikrotasks und Makrotasks
Vorwort: js ist eine Single-Thread-Sprache, daher...
Die endgültige Lösung für Chromes Mindestschriftgrößenbeschränkung von 12px
Ich glaube, dass viele Benutzer, die Websites ers...
Hostübergreifende Kommunikation zwischen Docker-Containern - Overlay-basierte Implementierungsmethode
Overlay-Netzwerkanalyse Die integrierte netzwerkü...
Vue verwendet Canvas, um den Bildkomprimierungs-Upload zu realisieren
In diesem Artikel wird der spezifische Code von V...