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
Detaillierte Erläuterung grundlegender Betriebsbefehle wie Starten und Stoppen von Nginx unter Windows
Um Nginx unter Windows zu verwenden, müssen wir e...
docker run -v mountet Datenvolumes abnormal und der Containerstatus wird immer neu gestartet
Symptome: Nach dem Hinzufügen des Parameters -v z...
Verwenden Sie .Htaccess, um böswillige IP-Angriffe auf Websites zu verhindern, den Zugriff auf bestimmte Domänennamen zu untersagen, Maschinencrawler zu untersagen und Hotlinking zu untersagen
Vor einigen Tagen habe ich festgestellt, dass mei...
Beispiel für die Verwendung von JS zur nativen Implementierung des Jahreskarussell-Auswahleffekts
Vorwort Verwenden Sie js, um einen Jahresrotation...
Apple Mac OS X in VMWare12 installieren – Grafik-Tutorial
1. Einleitung: Da mein Freund einige Systemkenntn...
Entwickeln Sie Beispielcode für einen Taschenrechner mit nativem JavaScript
Die Hauptfunktion eines Rechners besteht darin, n...
Mehrere gängige Methoden zum Festlegen der Ankerpositionierung in HTML
Mir sind mehrere Möglichkeiten bekannt, die Ankerp...
Detaillierte Erklärung von Prototypen und Prototypenketten in JavaScript
Inhaltsverzeichnis Prototyp-Kettendiagramm Grundl...
Beheben Sie das Problem, dass Docker Run oder Docker Restart beim Starten des Images automatisch beendet werden
Führen Sie den Befehl aus: docker run --name cent...
Detaillierte Erklärung des JavaScript-Proxy-Objekts
Inhaltsverzeichnis 1. Was ist ein Proxy? 2. Wie w...
10 Aspekte, die beim Entwurf und Aufbau einer umfangreichen Website-Architektur berücksichtigt werden müssen
Wir diskutieren hier nicht über PHP-, JSP- oder ....
Beispiel für die Bereitstellungsmethode „Forever+nginx“ einer Node-Site
Ich habe vor Kurzem den günstigsten Tencent-Cloud...
JavaScript zum Erzielen digitaler Uhreffekte
In diesem Artikelbeispiel wird der spezifische Co...
So verwenden Sie worker_threads zum Erstellen neuer Threads in nodejs
Einführung Wie im vorherigen Artikel erwähnt, gib...
Eine kurze Diskussion über die VUE Uni-App-Entwicklungsumgebung
Inhaltsverzeichnis 1. Über die visuelle Schnittst...