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
Detaillierte Erklärung der Funktion und Verwendung der DOCTYPE-Deklaration
1. Browser-Rendering-Modus und Doctype Einige Web...
Verwenden Sie Javascript, um ein Sliding-Nav-Navigations-Plugin mit Gleitbalkeneffekt zu entwickeln
Inhaltsverzeichnis 1. Einleitung 2. Nutzung 3. En...
Lösung zur Deinstallation von Python und Yum im CentOs-System
Hintergrund des Unfalls: Vor einigen Tagen habe i...
Analyse des zugrunde liegenden Prinzips der MySQL-Mehrversions-Parallelitätskontrolle MVCC
Inhaltsverzeichnis 1 Probleme bei der Transaktion...
JavaScript Canvas realisiert dynamische Punkt- und Linieneffekte
In diesem Artikel wird der spezifische Code für J...
So prüfen Sie, ob Daten vorhanden sind, bevor Sie sie in MySQL einfügen
Geschäftsszenario: Der Besuchsstatus des Besucher...
12 nützliche Array-Tricks in JavaScript
Inhaltsverzeichnis Array-Deduplizierung 1. from()...
MySQL-Optimierungslösung: Aktivieren Sie das Protokoll für langsame Abfragen
Inhaltsverzeichnis Vorwort Einrichten der Protoko...
HTML-Tabellen-Tag-Tutorial (33): Attribut für vertikale Zellenausrichtung VALIGN
In vertikaler Richtung können Sie die Zellenausri...
Installations-JDK-Tutorialanalyse für Linux-System (Centos6.5 und höher)
Artikelstruktur 1. Vorbereitung 2. Installieren S...
Lösung für den 1045-Fehler in der MySQL-Datenbank
Wie löst man das Problem 1045, wenn die lokale Da...
Detaillierte Anwendung des dynamischen Vue-Formulars
Überblick Es gibt viele Formularanforderungen im ...
So finden Sie identische Dateien in Linux
Während der Nutzung des Computers entsteht im Sys...
Eine kurze Diskussion des interessanten Boxmodells der CSS3-Boxgrößeneigenschaft
Jeder muss die Zusammensetzung des Boxmodells von...
Detailliertes Beispiel für die Statusverwaltung der Hilfsfunktion der Vue-Frontend-Entwicklung
Inhaltsverzeichnis Kartenstaat Kartengetter Karte...