js, um die Produktionsmethode des Karussells zu realisieren
|
In diesem Artikel wird der spezifische Code für js zur Realisierung der Anzeige von Karussellbildern zu Ihrer Information freigegeben. Der spezifische Inhalt ist wie folgt Der Effekt ist wie in der Abbildung dargestellt
Der Code lautet wie folgt:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8" />
<Titel></Titel>
<style type="text/css">
* {
Polsterung: 0;
Rand: 0;
}
.container {
Position: relativ;
Breite: 600px;
Höhe: 300px;
Rand: 30px automatisch;
Überlauf: versteckt;
}
.links {
Anzeige: keine;
Position: absolut;
oben: 50 %;
links: -20px;
transformieren: verschiebeY(-50%);
Breite: 50px;
Höhe: 50px;
Rahmen oben rechts – Radius: 50 %;
Rahmen unten rechts – Radius: 50 %;
Hintergrundfarbe: rgba(0,0,0,0,5);
Z-Index: 999;
}
.links ich {
Anzeige: Block;
Rand oben: 10px;
Rand links: 20px;
Breite: 30px;
Höhe: 30px;
Hintergrund: URL (Bild/links.png) keine Wiederholung;
Hintergrundgröße: 30px 30px;
}
.Rechts {
Anzeige: keine;
Position: absolut;
oben: 50 %;
rechts: -20px;
transformieren: verschiebeY(-50%);
Breite: 50px;
Höhe: 50px;
Rahmen oben links-Radius: 50 %;
Rahmen unten links – Radius: 50 %;
Hintergrundfarbe: rgba(0,0,0,0,5);
Z-Index: 999;
}
.richtig ich {
Anzeige: Block;
Rand oben: 10px;
Rand rechts: 20px;
Breite: 30px;
Höhe: 30px;
Hintergrund: URL (Bild/rechts.png) keine Wiederholung;
Hintergrundgröße: 30px 30px;
}
ul li,ol li {
Listenstil: keiner;
}
.Bild {
Position: absolut;
}
.Liste {
Position: absolut;
unten: 10px;
links: 10px;
}
.Liste li {
schweben: links;
Rand rechts: 10px;
Breite: 10px;
Höhe: 10px;
Rahmenradius: 10px;
Hintergrundfarbe: rgba(0,0,0,0,5);
Cursor: Zeiger;
}
.Liste .aktuell {
Hintergrundfarbe: #fff;
}
.Bild li {
Position: absolut;
Breite: 600px;
Höhe: 300px;
}
img {
Breite: 100 %;
Höhe: 100%;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Container">
<span Klasse="links"><i></i></span>
<span class="rechts"><i></i></span>
<ul Klasse="Bild">
<li><img src="img/1.jpg" ></li>
<li><img src="img/2.jpg" ></li>
<li><img src="img/3.jpg" ></li>
<li><img src="img/4.jpg" ></li>
<li><img src="img/5.jpg" ></li>
</ul>
<ol Klasse="Liste">
</ol>
</div>
<Skripttyp="text/javascript">
var Bild = document.querySelector('.Bild');
var Liste = Dokument.AbfrageSelector('.Liste');
Variable Nummer = 0;
var Kreis=0;
für (i=0;i<Bild.Kinder.Länge;i++)
{
// Position des Bildes festlegen picture.children[i].style.left = i*600 + 'px';
// Automatisch eine geordnete Liste generieren var li = document.createElement('li');
li.setAttribute('index',i);
Liste.AnhängenKind(li);
// Füge ein Klickereignis zu li hinzu li.addEventListener('click',function () {
für (var i=0;i<list.children.length;i++) {
Liste.Kinder[i].Klassenname = '';
}
dieser.Klassenname = "aktuell";
var index = this.getAttribute('index');
Zahl = Index;
Kreis = Index;
animieren(Bild, -Index*600);
})
}
// Legen Sie den Klassennamen der ersten alten untergeordneten Liste fest.children[0].className = 'current';
var left = document.querySelector('.left');
var right = document.querySelector('.right');
var Container = Dokument.QuerySelector('.Container');
//Maus so einstellen, dass sie das Ereignis verlässt container.addEventListener('mouseover',function () {
links.Stil.Anzeige = "Block";
rechts.Stil.Anzeige = "Block";
Intervall löschen(Timer)
Zeitgeber = null;
})
container.addEventListener('mouseleave',Funktion () {
linke.Stil.Anzeige = "keine";
rechts.Stil.Anzeige = "keine";
Timer = Intervall festlegen(Funktion () {
rechtsklick();
},1000);
})
// js-Animationsfunktion Funktion animate (obj, target, callback) {
Intervall löschen(obj.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);
wenn (Rückruf) {
Rückruf();
}
}
obj.style.left = obj.offsetLeft + Schritt + 'px';
},15)
}
var first = Bild.Kinder[0].cloneNode(true);
Bild.AnhängenKind(erstes);
Bild.letztesKind.Stil.links = (Bild.Kinder.Länge-1)*600 + 'px';
//Rechtsklick eventright.addEventListener('click',function () {
if (num==Bild.Kinder.Länge-1) {
Bild.Stil.links = 0;
Zahl = 0;
}
Zahl++;
animieren(Bild, -Num*600);
Kreis ++;
wenn (Kreis == Liste.Kinder.Länge) {
Kreis = 0;
}
für (var i = 0;i<list.children.length;i++) {
Liste.Kinder[i].Klassenname = '';
}
Liste.Kinder[Kreis].Klassenname = "aktuell";
})
// Linksklick-Ereignis left.addEventListener('click',function () {
wenn (num==0) {
Bild.Stil.links = -(Bild.Kinder.Länge-1)*600 +'px';
Num = Bild.Kinder.Länge-1;
}
Nummer--;
animieren(Bild, -Num*600);
Kreis --;
wenn (Kreis < 0) {
Kreis = Liste.Kinder.Länge-1;
}
für (var i = 0;i<list.children.length;i++) {
Liste.Kinder[i].Klassenname = '';
}
Liste.Kinder[Kreis].Klassenname = "aktuell";
})
var Timer = Intervall festlegen(Funktion () {
// Manuell right.click() aufrufen;
},1000);
</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:
|
<<: Zwei Möglichkeiten zur Installation von Python3 auf Linux-Servern
Artikel empfehlen
So verwenden Sie CSS-Medienabfragen mit einem geringeren Seitenverhältnis
CSS-Medienabfragen haben ein sehr praktisches Sei...
Detaillierte Erklärung und klassische Interviewfragen zum Vue-Lebenszyklus und zu Hook-Funktionen
Inhaltsverzeichnis 1. Vue-Lebenszyklus 2. Hook-Fu...
Beispielverwendung des Linux-Komprimierungsdateibefehls „zip“
Das „.zip“-Format wird zum Komprimieren von Datei...
Ausführliche Erläuterung der Auswirkungen von NULL auf Indizes in MySQL
Vorwort Ich habe viele Blogs gelesen und von viel...
Verwendung des MySQL-Stresstesttools Mysqlslap
1. MySQLs eigenes Stresstest-Tool Mysqlslap mysql...
Verwendung des MySQL-Zeitstempels
Vorwort: Zeitstempelfelder werden häufig in MySQL...
Analyse der Verwendung und des Prinzips der Docker Swarm-Clusterverwaltung
Schwarmclusterverwaltung Einführung Docker Swarm ...
Zwei Möglichkeiten zum Löschen von Tabellendaten in MySQL und ihre Unterschiede
Es gibt zwei Möglichkeiten, Daten in MySQL zu lös...
html ein Link-Tag Titel Attribut Zeilenumbruch Mouseover Prompt Inhalt Zeilenumbruch Effekt
Die Methode zum Umbrechen des Inhalts (Titelattrib...
js zur Realisierung der automatischen Sperrbildschirmfunktion
1. Anwendungsszenarien Es gibt eine solche Anford...
So gehen Sie mit dem Fehler beim Einfügen seltener Zeichen in MySQL um (falscher Zeichenfolgenwert)
Kürzlich wurde auf Unternehmensseite gemeldet, da...
Docker-Bereitstellung – Springboot-Projektbeispielanalyse
Dieser Artikel stellt hauptsächlich die Beispiela...
Installieren Sie den NVIDIA-Grafiktreiber unter Ubuntu (einfache Installationsmethode).
Installieren Sie den NVIDIA-Grafikkartentreiber u...
Detaillierte Erklärung der Schleifenverwendung in Javascript-Beispielen
Aus Langeweile habe ich ein paar einfache Übungen...
Docker-Protokolle - Zeigen Sie die Implementierung der Docker-Container-Protokolle an
Sie können die Containerprotokolle über den Befeh...