Natives JS zur Implementierung eines atmenden Karussells
|
Heute zeige ich Ihnen ein mit nativem JS implementiertes atmendes Karussell. Der Effekt ist wie folgt:
Nachfolgend sehen Sie die Codeimplementierung. Sie können sie gerne kopieren und einfügen.
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8" />
<title>Natives JS zur Implementierung eines atmenden Karussells</title>
<Stil>
ul {
Rand: 0;
Polsterung links: 0;
}
li {
Listenstil: keiner;
}
img {
Rand: keiner;
}
#hauptsächlich {
Breite: 280px;
Höhe: 330px;
Überlauf: versteckt;
Position: relativ;
Rand: 20px auto 0 auto;
}
#Hauptul {
Position: absolut;
links: 0;
}
#haupt ul li {
Breite: 280px;
Höhe: 330px;
schweben: links;
Position: absolut;
Filter: Alpha (Deckkraft = 0);
Deckkraft: 0;
}
#btn {
Zeilenhöhe: 14px;
Textausrichtung: zentriert;
Hintergrund: #eeeeee;
Breite: 280px;
Rand: 10px auto 0 auto;
Anzeige: Flex;
Flex-Richtung: Reihe;
Inhalt ausrichten: Abstand herum;
Elemente ausrichten: zentrieren;
}
#btn ein {
Anzeige: Inline-Block;
Breite: 14px;
Höhe: 14px;
Textdekoration: keine;
Zeilenhöhe: 12px;
Textausrichtung: zentriert;
Rahmenradius: 7px;
}
#btn a.index {
Hintergrundfarbe: #ccc;
}
#btn a.aktiv {
Hintergrundfarbe: rot;
}
</Stil>
<script type="text/javascript" src="js/move.js"></script>
<Skript>
fenster.onload = Funktion () {
var oMain = document.getElementById('main');
var oUl = oMain.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var oBtn = document.getElementById('btn');
var aA = oBtn.getElementsByTagName('a');
var iNow = 1;
var iNow2 = 1;
var bBtn = true;
varnum = 3;
var Timer = null;
oUl.style.width = aLi.length * aLi[0].offsetWidth + 'px';
aA[0].onclick = Funktion () {
wenn (bBtn) {
Intervall löschen(Timer);
Timer = Intervall festlegen (AutoPlay, 3000);
für (var i = 0; i < aLi.length; i++) {
aLi[i].style.position = "relativ";
aLi[i].style.filter = 'Alpha(Deckkraft=100)';
aLi[i].style.opacity = 1;
}
oUl.style.left = -(iNow - 1) * aLi[0].offsetWidth + 'px';
wenn (iNow == 1) {
iNow = aLi.Länge;
aLi[aLi.Länge - 1].style.position = "relativ";
aLi[aLi.Länge - 1].Stil.links = -aLi.Länge * aLi[0].OffsetWidth + 'px';
} anders {
ichJetzt--;
}
iNow2--;
zuAusführen();
bBtn = falsch;
}
};
aA[aA.Länge - 1].onclick = Funktion () {
wenn (bBtn) {
Intervall löschen(Timer);
Timer = Intervall festlegen (AutoPlay, 3000);
für (var i = 0; i < aLi.length; i++) {
aLi[i].style.position = "relativ";
aLi[i].style.filter = 'Alpha(Deckkraft=100)';
aLi[i].style.opacity = 1;
}
oUl.style.left = -(iNow - 1) * aLi[0].offsetWidth + 'px';
wenn (iNow == aLi.length) {
iJetzt = 1;
aLi[0].style.position = "relativ";
aLi[0].style.left = aLi.length * aLi[0].offsetWidth + 'px';
} anders {
iJetzt++;
}
iNow2++;
zuAusführen();
bBtn = falsch;
}
};
für (var i = 1; i < aA.Länge - 1; i++) {
aA[i].index = i;
aA[i].onclick = Funktion () {
Intervall löschen(Timer);
Timer = Intervall festlegen (AutoPlay, 3000);
iNow = dieser.index;
iNow2 = dieser.index;
zuAnzeigen();
};
};
Funktion toRun() {
für (var i = 1; i < aA.Länge - 1; i++) {
aA[i].Klassenname = "Index";
}
aA[iNow].className = "aktiv";
startMove(oUl, { links: -(iNow2 - 1) * aLi[0].offsetWidth }, Funktion () {
wenn (iNow == 1) {
aLi[0].style.position = "relativ";
aLi[0].style.left = 0;
oUl.style.left = 0;
iJetzt2 = 1;
} sonst wenn (iNow == aLi.length) {
aLi[aLi.Länge - 1].style.position = "relativ";
aLi[aLi.Länge - 1].Stil.links = 0;
oUl.style.left = -(aLi.length - 1) * aLi[0].offsetWidth + 'px';
iNow2 = aLi.Länge;
}
für (var i = 0; i < aLi.length; i++) {
aLi[i].style.position = 'absolut';
aLi[i].style.filter = 'Alpha(Deckkraft=0)';
aLi[i].style.opacity = 0;
}
oUl.style.left = 0;
aLi[iNow2 - 1].style.zIndex = num++;
aLi[iNow2 - 1].style.filter = 'Alpha(Deckkraft=100)';
aLi[iNow2 - 1].style.opacity = 1;
bBtn = wahr;
});
};
Funktion toShow() {
für (var i = 1; i < aA.Länge - 1; i++) {
aA[i].Klassenname = "Index";
}
für (var i = 0; i < aLi.length; i++) {
startMove(aLi[i], { Deckkraft: 0 });
}
aA[iNow].className = "aktiv";
startMove(aLi[iNow - 1], { Deckkraft: 100 }, Funktion () {
aLi[iNow - 1].style.zIndex = num++;
});
}
Timer = Intervall festlegen (AutoPlay, 3000);
Funktion autoPlay() {
wenn (iNow == aLi.length) {
iJetzt = 1;
iJetzt2 = 1;
} anders {
iJetzt++;
iNow2++;
}
zuAnzeigen();
}
};
</Skript>
</Kopf>
<Text>
<div id="Haupt">
<ul>
<li style="z-index:2; filter:alpha(opacity=100); opacity:1;">
<ein>
<img src="bilder/0.jpg" />
</a>
</li>
<li>
<ein>
<img src="bilder/1.jpg" />
</a>
</li>
<li>
<ein>
<img src="bilder/2.jpg" />
</a>
</li>
<li>
<ein>
<img src="bilder/3.jpg" />
</a>
</li>
</ul>
</div>
<div id="btn">
<a class="prev" href="javascript:;">
<a class="active" href="javascript:;">
</a>
<a class="index" href="javascript:;"></a>
<a class="index" href="javascript:;"></a>
<a class="index" href="javascript:;"></a>
<a Klasse = "nächste" href = "javascript:;">></a>
</div>
</body>
</html>Nachfolgend sehen Sie den Code der wichtigsten Bewegungsfunktion move.js, die im obigen Code eingeführt wurde:
Funktion startMove(obj, json, fnEnd) {
Intervall löschen(Objekt.Timer);
obj.timer = setzeIntervall(Funktion () {
doMove(obj, json, fnEnd);
}, 30);
}
Funktion doMove(obj, json, fnEnd) {
var iCur = 0;
var attr = null;
var bStop = true;
für (Attr in JSON) {
wenn (attr == 'Deckkraft') {
wenn (parseInt(100 * getStyle(obj, attr)) == 0) {
iCur = parseInt(100 * getStyle(obj, attr));
} anders {
iCur = parseInt(100 * getStyle(obj, attr)) || 100;
}
} anders {
iCur = parseInt(getStyle(obj, attr)) || 0;
}
var iSpeed = (json[attr] – iCur)/5;
iSpeed = (iSpeed > 0) ? Math.ceil(iSpeed) : Math.floor(iSpeed);
wenn (json[attr] != iCur) {
bStop = falsch;
}
wenn (attr == 'Deckkraft') {
obj.style.filter = 'Alpha(Deckkraft=' + (iCur + iSpeed) + ')';
obj.style.opacity = (iCur + iSpeed) / 100;
} anders {
obj.style[attr] = iCur + iSpeed + 'px';
}
}
wenn (bStop) {
Intervall löschen(Objekt.Timer);
wenn (fnEnde) {
fnEnd.call(obj);
}
}
}
Funktion stopMove(obj) {
Intervall löschen(Objekt.Timer);
}
Funktion getStyle(Objekt, Attribut) {
wenn (obj.aktuellerStil) {
returniere obj.currentStyle[attr];
} anders {
gibt getComputedStyle(obj)[attr] zurück;
}
}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:
|
<<: Tutorial zur HTML-Tabellenauszeichnung (22): Zeilenrahmen-Farbattribut BORDERCOLORLIGHT
>>: So verwenden Sie das Docker-Plugin, um Projekte remote auf Cloud-Servern in IDEA bereitzustellen
Artikel empfehlen
MYSQL8.0.13 kostenlose Installationsversion Konfiguration Tutorial Beispiel detaillierte Erklärung
1. Download, ich nehme 8.0 als Beispiel Download-...
Saubere XHTML-Syntax
Das Schreiben von XHTML erfordert eine saubere HTM...
So stellen Sie ein SpringCloud-Projekt mit Docker bereit
Inhaltsverzeichnis Docker-Image herunterladen Sta...
Diskussion über die Möglichkeit zum Öffnen von Website-Hyperlinks
Ein neues Fenster wird geöffnet. Vorteile: Wenn d...
MySQL SQL-Anweisung zum Suchen doppelter Daten basierend auf einem oder mehreren Feldern
SQL findet alle doppelten Datensätze in einer Tab...
js implementiert Axios Limit-Anforderungswarteschlange
Inhaltsverzeichnis Der Hintergrund ist: Was wird ...
Einige Fallstricke beim JavaScript Deep Copy
Vorwort Als ich zuvor zu einem Vorstellungsgesprä...
MySQL-Volltextindex, um eine einfache Version des Suchmaschinen-Beispielcodes zu erreichen
Vorwort Nur Innodb- und MyISAM-Speicher-Engines k...
Eine kurze Diskussion über HTML-Dokumenttypen und -Kodierung
DOKTYP Doctype wird verwendet, um dem Browser mit...
Schreiben eines Schere-Stein-Papier-Spiels in JavaScript
In diesem Artikel finden Sie den spezifischen Cod...
Eine Methode zum Verbergen von Prozessen unter Linux und die dabei auftretenden Fallstricke
Vorwort 1. Die in diesem Artikel verwendeten Tool...
jQuery ermöglicht nahtloses Scrollen von Tabellen
In diesem Artikelbeispiel wird der spezifische Co...
Teilen Sie 13 grundlegende Syntax von Typescript
Inhaltsverzeichnis 1. Was ist Ts 2. Grundlegende ...
Vue-Kapselungskomponententool $attrs, $listeners-Verwendung
Inhaltsverzeichnis Vorwort $attrs Beispiel: $list...
So führen Sie nach der Kompilierung und Installation von Nginx ein reibungsloses Upgrade durch
Wenn Sie nach der Kompilierung und Installation v...