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 des Unterschieds zwischen run/cmd/entrypoint in Docker
In Dockerfile können run, cmd und entrypoint zum ...
Der Nationalfeiertag steht vor der Tür. Verwenden Sie JS, um ein kleines Tool zum Generieren eines Avatars im Stil des Nationalfeiertags zu implementieren. Detaillierte Erläuterung des Implementierungsprozesses
Inhaltsverzeichnis 1. Seitenlayout 2. Bild-Upload...
JavaScript, um einen einheitlichen Animationseffekt zu erzielen
In diesem Artikelbeispiel wird der spezifische Co...
Auszeichnungssprache - Stylesheets drucken
Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...
Einfaches Beispiel für die Definition und Verwendung von MySQL-Triggern
Dieser Artikel beschreibt die Definition und Verw...
Implementierungsbeispiel eines React-Projekts von der Neuerstellung bis zur Bereitstellung
Neues Projekt starten Dieser Artikel zeichnet hau...
Beinhaltet der %-Wert im neu erstellten MySQL-Benutzer localhost?
Normale Erklärung % bedeutet, dass jeder Client e...
Grundlagen und Beispiele zur TypeScript-Aufzählung
Inhaltsverzeichnis Vorwort Was sind Enumerationen...
Natives js imitiert die Pulldown-Aktualisierung eines Mobiltelefons
In diesem Artikel wird der spezifische Code von j...
Lösung für das Verschwinden des MySql-Dienstes aus unbekannten Gründen
Lösung für das Verschwinden des MySql-Dienstes au...
Zusammenfassung einiger wichtiger Punkte zu mysql init_connect
Die Rolle von init_connect init_connect wird norm...
Zusammenfassung der für MySQL erforderlichen allgemeinen Kenntnisse
Inhaltsverzeichnis Primärschlüsseleinschränkung E...
Die Webseite kann nicht geöffnet werden, da dem Div-Element ein schließender Tag fehlt
Zuerst dachte ich, es läge an der Geschwindigkeit ...
Probleme beim Springen auf HTML-Seiten und bei der Parameterübertragung
HTML-Seitensprung: Fenster.öffnen(URL, "&quo...
MySQL-Datenbanktabelle und Datenbankpartitionierungsstrategie
Lassen Sie uns zunächst darüber sprechen, warum w...