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
Beispiel zur MySQL-Passwortänderung – ausführliche Erklärung
Beispiel zur MySQL-Passwortänderung – ausführlich...
Perfekte Lösung für das Problem, dass Navicat nach der Installation von MySQL im Docker keine Verbindung herstellen kann
1. Docker zieht das Image Docker Pull MySQL (stan...
LinkedIn wird überarbeitet, um das Surfen auf der Website zu vereinfachen
Das geschäftliche Social-Networking-Portal Linked...
Zusammenfassung der Methoden zum Löschen des Cache im Linux-System
1) Einführung in den Cache-Mechanismus Um die Lei...
So verwenden Sie Docker+DockerCompose zum Kapseln von Webanwendungen
Inhaltsverzeichnis Technologie-Stack Backend-Buil...
Linux-System zum Anzeigen von CPU, Maschinenmodell, Speicher und anderen Informationen
Während der Systemwartung müssen Sie möglicherwei...
Verwenden Sie Prometheus, um den verbleibenden verfügbaren Prozentsatz der MySQL-Autoinkrement-Primärschlüssel zu zählen
Vor kurzem hat eine Datenbank in der Produktionsu...
Zusammenfassung der Unterschiede zwischen den MySQL-Speicher-Engines MyISAM und InnoDB
1. Änderungen in der Standard-Speicher-Engine von...
Was tun, wenn Sie Ihr Passwort in MySQL 5.7.17 vergessen?
1. Skip-Grant-Tables zur Datei my.ini hinzufügen ...
Node.js + Express + Socket realisiert einen Online-Chatroom für mehrere Personen in Echtzeit
In diesem Artikel wird der spezifische Code von N...
Eine kurze Erläuterung, warum Daemon Off beim Ausführen von Nginx in Docker verwendet wird
Ich bin sehr glücklich. Wenn ich auf dieses Probl...
Analyse der Prinzipien und der Nutzung von Docker-Container-Datenvolumes
Was ist ein Containerdatenvolumen? Wenn sich die ...
Detaillierte Erläuterung des Vue-Identitätsauthentifizierungsmanagements und der Mandantenverwaltung
Inhaltsverzeichnis Überblick Berechtigungen auf S...
Die Bilder in HTML werden direkt durch base64-kodierte Strings ersetzt
Kürzlich stieß ich auf eine Webseite, die zwar Bil...
Designtheorie: Textausdruck und Benutzerfreundlichkeit
<br />Beim Textdesign konzentrieren wir uns ...