Verwenden von JavaScript zum Implementieren von Karusselleffekten
|
In diesem Artikel wird der spezifische Code für JavaScript zur Erzielung der Spezialeffekte der Karussellkarte als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<Titel></Titel>
<style type="text/css">
.aaa {
Breite: 600px;
Höhe: 350px;
position: relative;/*Relative Positionierung*/
Rand: 50px auto;/*50px vom oberen Rand und zentriert*/
}
.Bild img {
position: absolute;/*absolute Positionierung*/
}
.punkt {
Position: absolut;
unten: 5px;
}
.punkt li {
schweben: links;
Breite: 16px;
Höhe: 16px;
Hintergrundfarbe: #e8e8e8;
Randradius: 50 %;
list-style: none;/*Listenstil löschen*/
Rand rechts: 10px;
Cursor: Zeiger;/*Der Cursor wird als Zeiger (eine Hand) dargestellt, der auf einen Link hinweist*/
}
.links {
Breite: 30px;
Höhe: 30px;
Position: absolut;
oben: 169px;
Textausrichtung: zentriert;
Hintergrundfarbe: #000000;
Zeilenhöhe: 30px;
Farbe: #FFFFFF;
Cursor: Zeiger;/*Der Cursor wird als Zeiger (eine Hand) dargestellt, der auf einen Link hinweist*/
}
.Rechts {
Breite: 30px;
Höhe: 30px;
Position: absolut;
oben: 169px;
rechts: 0;
Textausrichtung: zentriert;
Hintergrundfarbe: #000000;
Zeilenhöhe: 30px;
Farbe: #FFFFFF;
Cursor: Zeiger;/*Der Cursor wird als Zeiger (eine Hand) dargestellt, der auf einen Link hinweist*/
}
.aaa .Stelle {
Hintergrundfarbe: #FF0000;
}
</Stil>
</Kopf>
<Text>
<div Klasse="aaa">
<div Klasse="Bild">
<img src="images/1.jpg" style="Breite: 600px;Höhe: 350px;">
<img src="images/2.jpg" style="Breite: 600px;Höhe: 350px;">
<img src="images/3.jpg" style="Breite: 600px;Höhe: 350px;">
<img src="images/4.jpg" style="Breite: 600px;Höhe: 350px;">
<img src="images/5.jpg" style="Breite: 600px;Höhe: 350px;">
</div>
<ul Klasse="Punkt">
<li Klasse="Stelle"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="left"><</div><!--< Escape-Zeichen-->
<div class="right">></div><!--> Escape-Zeichen-->
</div>
<Skript>
var lis = document.querySelectorAll(".dot li")
var Bild = document.querySelectorAll(".picture img")
var left = document.querySelector(".left")
var rechts = document.querySelector(".rechts")
var aaa = document.querySelector(".aaa")
var index = 0 //Setze die Indexnummer der Variable picture[index].style.opacity = 1 //Das erste Bild wird angezeigt //Rechte Taste ändert das Bild right.onclick = function() {
fn("+")
}
//Linke Taste um das Bild zu ändernleft.onclick = function() {
fn("-")
}
//Timer ändert das Bild alle 3000 Millisekunden var timer = setInterval(function() {
fn("+")
}, 3000)
//Maus geht in die Pause aaa.onmouseover = function() {
Intervall löschen(Timer)
}
//Maus raus und fortfahren aaa.onmouseout = function() {
Timer = Intervall setzen(Funktion() {
fn("+")
}, 3000)
}
//Ändere das Bild wenn die Maus den Punkt berührt for (var i = 0; i < lis.length; i++) {
lis[i].in = i
lis[i].onmouseover = Funktion() {
fn(dies.in)
}
}
//Funktion Funktion fn(ope) {
picture[index].style.opacity = 0 //Das vorherige Bild wird ausgeblendet lis[index].className = "" //Kleinen Punktstil löschen//Ope beurteilen
wenn (Typ von ope === 'Zahl') {
Index = offen
} else if (ope === '+') { //Beurteilen, ob die richtige Taste gedrückt ist if (index === 4) {
Index = 0
} anders {
Index++
}
} anders {
if (index === 0) { // Beurteilen Sie, ob der Index der linken Taste = 4 ist
} anders {
Index--
}
}
picture[index].style.opacity = 1 //Aktuelles Bild displaylis[index].className = "spot" //Dem Spot einen Stil hinzufügen}
</Skript>
</body>
</html>Der Effekt ist in der Abbildung dargestellt:
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 verwenden Sie den Fuser-Befehl im Linux-System
>>: MySQL bedingte Abfrage und/oder Verwendung und Priorität Beispielanalyse
Artikel empfehlen
Alibaba Cloud Nginx konfiguriert https, um ein Domänennamen-Zugriffsprojekt zu implementieren (grafisches Tutorial)
Schritt 1: Signieren Sie ein vertrauenswürdiges S...
Detaillierte Erklärung der MySQL-Instanz mit aktiviertem SSD-Speicher
Detaillierte Erklärung der MySQL-Instanz mit akti...
Der Unterschied zwischen MySQL-Datenbankhost 127.0.0.1 und localhost
Viele meiner Freunde haben möglicherweise ein Pro...
Detaillierte Erläuterung der verschachtelten Tabelle im Vue-ElementUI-Formular und der Überprüfung jeder Zeile
Inhaltsverzeichnis Effektanzeige Code-Link Schlüs...
Vue implementiert Sternebewertung mit Dezimalstellen
In diesem Artikel wird der spezifische Code von V...
Der Implementierungsprozess zum Extrahieren von Oracle-Daten in eine MySQL-Datenbank
Bei der Migration einer Oracle-Datenbank zu einer...
Beispielcode zur Implementierung der olympischen Ringe mit reinem HTML+CSS
Rendern Code - Nehmen Sie die blauen und gelben R...
Detaillierte Erläuterung der Verwendung des Linux-Befehls seq
01. Befehlsübersicht Der Befehl „seq“ wird verwen...
Detaillierte Schritte zur Installation der Sogou-Eingabemethode unter Ubuntu 20.04
1. Installieren Sie das Fcitx-Eingabeframework Zu...
mysql-8.0.17-winx64 Bereitstellungsmethode
1. Laden Sie mysql-8.0.17-winx64 von der offiziel...
So verwenden Sie die ES6-Klassenvererbung, um einen wunderschönen Balleffekt zu erzielen
Inhaltsverzeichnis einführen Implementierungsschr...
Vue öffnet ein neues Fenster und implementiert ein grafisches Beispiel für die Parameterübergabe
Die Funktion, die ich erreichen möchte, besteht d...
Detaillierte Schritte zum Einrichten des Netzwerks für die mit Win10 gelieferte virtuelle Maschine (grafisches Tutorial)
1. Klicken Sie auf den Server-Host und dann in de...
Detaillierte Analyse des Problems der Groß-/Kleinschreibung von Bezeichnern in MySQL
In MySQL kann das Problem der Groß- und Kleinschr...
Detaillierte Erläuterung der Lösung, um den Inhalt im Container im Flex-Layout zu halten
Auf der mobilen Seite ist das Flex-Layout sehr nü...