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
So ermitteln Sie, ob das Linux-System auf VMware installiert ist
Wie kann festgestellt werden, ob das aktuelle Lin...
Probleme mit dem benannten Mount und dem anonymen Mount des Docker-Container-Datenvolumens
Inhaltsverzeichnis Was ist ein Containerdatenvolu...
Verwenden Sie Iframe, um Wettereffekte auf Webseiten anzuzeigen
CSS: Code kopieren Der Code lautet wie folgt: *{Ra...
Details zur Verwendung von Bimface in Vue
Inhaltsverzeichnis 1. Installieren Sie das Vue-Ge...
Flex-Layout ermöglicht adaptive Seiten (Syntax und Beispiele)
Einführung in Flex Layout Flex bedeutet auf Engli...
10 Minuten, um das Single-Page-Anwendungsrouting des WeChat-Applets gründlich zu verstehen
Merkmale einer Single-Page-Anwendung „Annahme:“ A...
Hinweise zur Groß-/Kleinschreibung bei MySQL
Inhaltsverzeichnis Die Groß-/Kleinschreibung von ...
Eine kurze Einführung in die Unterschiede zwischen HTML und XHTML sowie HTML4- und HTML5-Tags
Unterschied zwischen HTML und XHTML 1. XHTML-Elem...
MySQL: Praktische Erfahrung mit der Verwendung der Insert-Anweisung
Inhaltsverzeichnis 1. Mehrere Syntaxen von Insert...
Detailliertes Tutorial zum Hochladen und Konfigurieren von JDK und Tomcat unter Linux
Vorbereitung 1. Starten Sie die virtuelle Maschin...
Detaillierte Erklärung der CSS-Stil-Kaskadierungsregeln
Der Syntaxstil der CSS-Stilregel ist die Grundein...
mysql5.7 Installations- und Konfigurationstutorial unter Centos7.3
In diesem Artikel finden Sie das Installations- u...
MySQL Series 7 MySQL-Speicher-Engine
1. MyISAM-Speicher-Engine Mangel: Keine Unterstüt...
Verständnis und Anwendungsszenarien von ES6-Erweiterungsoperatoren
Inhaltsverzeichnis 1. Ersetzen Sie die Apply-Meth...
Detaillierte Analyse der MySQL MDL-Metadatensperre
Vorwort: Wenn Sie eine SQL-Anweisung in MySQL aus...