JS realisiert den automatischen Wiedergabeeffekt von Bildern
|
In diesem Artikel wird der spezifische Code von JS zur Erzielung des automatischen Wiedergabeeffekts von Bildern als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt JS realisiert die automatische Wiedergabe von Bildern1. Schauen Sie sich zuerst die Renderings an
2. Code vervollständigen
<!DOCTYPE html>
<html>
<Kopf>
<Stil>
/* Stile definieren */
Körper{
Marge: 5 % 30 %;
}
.bannerimage{width:700px;height:400px;float:left;background-size:100% 100%;color:#fff;box-shadow: 0 0 12px 2px #142732;}
.box{width:700px;height:400px;margin:0px auto;overflow: hidden;}
/* Die Breite der Box ist die Anzahl der Bilder multipliziert mit der Breite des Bannerbildes*/
.img-g{width:4900px;height:400px;position:relative;}
.img-g img{float:left;Breite:700px;Höhe:400px;}
.button-g{position:relative;top:-35px;text-align:center;}
.button-g span{display:inline-block;position:relative;z-index:10;width:10px;height:10px;margin:0 5px;border-radius:100%;cursor: pointer;}
</Stil>
<script type="text/javascript" src="js/jquery.js"></script>
<Skripttyp="text/javascript">
$(Funktion () {
// Automatische Wiedergabe implementieren var p=document.getElementsByClassName('img-g')[0];
var button = document.querySelectorAll('.button-g span')
//Stellen Sie die Wiedergabezeit auf 3 Sekunden ein window.timer=setInterval(move,3000);
// Karusselleinstellungen Funktion move(){
// Bannerbildbreite multipliziert mit der Anzahl der Bilder if(parseInt(p.style.left)>-4200){
// Behalten Sie die Breite des Bannerbilds bei: 700
p.style.left=parseInt(p.style.left)-700+'px'
p.style.transition='links 1s';
zusammen(-Math.round(parseInt(p.style.left)/700))
wenn (parseInt (p.style.left) <= -4200) {
setzeTimeout(Funktion(){
zusammen(0)
p.Stil.links='0px'
p.style.transition='linke Nullen';
},1000)
}
}anders{
p.Stil.links='0px'
p.style.transition='linke Nullen';
}
}
//Setze den kleinen Punkt for(var i=0;i<button.length;i++){
// button[i].style.backgroundColor='#eee';
button[i].beimKlick=Funktion(){
p.style.left=-700*this.getAttribute('Datenindex')+'px'
tog(this.getAttribute('Datenindex'))
Intervall löschen(Fenster.Timer)
window.timer=setInterval(Verschieben,3000);
}
}
//Setze die kleine Punktfunktion tog(index){
wenn(index>5){
zusammen(0);
zurückkehren;
}
für(var i=0;i<button.length;i++){
button[i].style.backgroundColor='rgba(255, 255, 255, 0,5)';
}
button[index].style.backgroundColor='rgb(255, 255, 255)';
}
// Mouseover-Ereignis p.onmouseover=function(){
Intervall löschen(Fenster.Timer)
}
// Maus-Entfernungsereignis p.onmouseout=function(){
window.timer=setInterval(Verschieben,3000);
}
});
</Skript>
</Kopf>
<Text>
<div Klasse="Bannerbild">
<div Klasse='Box'>
<div Klasse = 'img-g' Stil = 'links: 0px; Übergang: links 1s;'>
<img src="images/img_1.jpg" alt="1">
<img src="/images/img_2.jpg" alt="2">
<img src="/images/img_3.jpg" alt="3">
<img src="/images/img_4.jpg" alt="4">
<img src="/images/img_5.jpg" alt="5">
<img src="/images/img_6.jpg" alt="6">
<img src="/images/img_1.jpg" alt="1">
</div>
<div Klasse='button-g'>
<span data-index='0' style="Hintergrundfarbe: #eeeeee"></span>
<span data-index='1' style="Hintergrundfarbe: rgba(255, 255, 255, 0,5)"></span>
<span data-index='2' style="Hintergrundfarbe: rgba(255, 255, 255, 0,5)"></span>
<span data-index='3' style="Hintergrundfarbe: rgba(255, 255, 255, 0,5)"></span>
<span data-index='4' style="Hintergrundfarbe: rgba(255, 255, 255, 0,5)"></span>
<span data-index='5' style="Hintergrundfarbe: rgba(255, 255, 255, 0,5)"></span>
</div>
</div>
</div>
</body>
</html>3. Erklärung der Schlüsselcodes 3.1. Hinweise zu CSS-Einstellungen: Die Breite von img-g ist: die Anzahl der Bilder multipliziert mit der Breite des Bannerbilds, wie folgt:
.img-g{width:4900px;height:400px;position:relative;}3.2. Karussellkonstanten und Ereigniseinstellungen Die Konstante 1 wird auf die Breite des Bannerbildes multipliziert mit der Anzahl der Bilder wie folgt gesetzt:
wenn (parseInt(p.style.left)>-4200){}Die Konstante 2 wird so eingestellt, dass die Breite des Bannerbilds konstant bleibt (700), und zwar wie folgt: p.style.left=parseInt(p.style.left)-700+'px' Einstellungen für die Anzeige kleiner Punkte:
//Setze den kleinen Punkt for(var i=0;i<button.length;i++){
button[i].style.backgroundColor='#eee';
button[i].beimKlick=Funktion(){
p.style.left=-700*this.getAttribute('Datenindex')+'px'
tog(this.getAttribute('Datenindex'))
Intervall löschen(Fenster.Timer)
window.timer=setInterval(Verschieben,3000);
}
}
//Setze die Klickereignisfunktion für den kleinen Punkt tog(index){
//Anzahl der Punkteif(index>5){
zusammen(0);
zurückkehren;
}
für(var i=0;i<button.length;i++){
// Standardmäßige Punktanzeigefarbe button[i].style.backgroundColor='rgba(255, 255, 255, 0.5)';
}
// Die Anzeigefarbe des aktuellen Punkts button[index].style.backgroundColor='rgb(255, 255, 255)';
}Mausereignis: Die Wiedergabe wird gestoppt, wenn die Maus darüber bewegt wird, und die Wiedergabe wird nach 3 Sekunden fortgesetzt, wenn die Maus wegbewegt wird.
// Mouseover-Ereignis p.onmouseover=function(){
Intervall löschen(Fenster.Timer)
}
// Maus-Entfernungsereignis p.onmouseout=function(){
window.timer=setInterval(Verschieben,3000);
}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:
|
Artikel empfehlen
Zeigt Ihnen, wie Sie das Linux-Subsystem von Win10 aktivieren (mit detaillierten Bildern und Text)
Heute werde ich Ihnen zeigen, wie Sie das Linux-S...
Implementierung von Wasserfall-Layout + dynamischem Rendering
Inhaltsverzeichnis Typische Wasserfall-Website Wa...
JS-Prinzip der asynchronen Ausführung und Rückrufdetails
1. JS-Prinzip der asynchronen Ausführung Wir wiss...
Detaillierte Analyse der Syntax von Mysql-Updates zum Ändern mehrerer Felder und
Beim Aktualisieren eines Datensatzes in MySQL ist...
So lösen Sie das Problem von -bash: /usr/bin/yum: Keine solche Datei oder kein solches Verzeichnis nach der Eingabe von yum in Linux
Nach der Eingabe von yum in Linux erscheint die E...
Website-Erstellungs-Tutorial für Anfänger: Lernen Sie, in zehn Tagen eine Website zu erstellen
Das 10-tägige Tutorial verwendet eine äußerst ver...
Preistabelle mit CSS3 implementiert
Ergebnis: Implementierungscode html <div id=&q...
Tutorial zur Optimierung der Installationskonfiguration von MySQL 8.0.18
Die Installation, Konfiguration und Optimierung v...
Tutorial zu HTML-Tabellen-Tags (32): Attribut für horizontale Zellenausrichtung ALIGN
In horizontaler Richtung können Sie die Zellenaus...
Vue+Websocket implementiert einfach die Chat-Funktion
In diesem Artikel wird der spezifische Code von V...
Beispielcode für HTML-Layout links und rechts
CSS: Code kopieren Der Code lautet wie folgt: html...
Einführung in gängige XHTML-Tags
<br />Ich habe festgestellt, dass viele Leut...
Detaillierte Erläuterung von Beispielen für JS-Closure- und Garbage-Collection-Mechanismen
Inhaltsverzeichnis Vorwort Text 1. Abschluss 1.1 ...
Implementierung der Docker-Bereitstellung eines MySQL-Clusters
Nachteile einer Single-Node-Datenbank Große Inter...
HTML implementiert die Funktion zur Erkennung der Eingabevervollständigung
Verwenden Sie „onInput(event)“, um festzustellen,...