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
Wie kann das Front-End die 100.000 vom Back-End zurückgegebenen Daten besser anzeigen?
Inhaltsverzeichnis Vorarbeit Backend-Konstruktion...
Docker Consul-Übersicht und Schritte zum Erstellen einer Clusterumgebung (grafische Erklärung)
Inhaltsverzeichnis 1. Übersicht über Docker Consu...
React antd realisiert dynamische Vergrößerung und Verkleinerung der Form
Beim Schreiben dynamischer Formulare bin ich zuvo...
Tutorial zur Master-Slave-Konfiguration der MySQL-Datenbank unter Windows
Der detaillierte Prozess zum Konfigurieren des My...
Tutorial zum Importieren und Exportieren von Docker-Containern
Hintergrund Die Popularität von Docker hängt eng ...
Analyse der MySql-Indexnutzungsstrategie
MySql-Index Indexvorteile 1. Sie können die Einde...
Tabellen in HTML aufteilen und zusammenführen (colspan, rowspan)
Der Code demonstriert die horizontale Zusammenfüh...
Einfache Schritte zum Konfigurieren des Nginx-Reverse-Proxys mit SSL
Vorwort Ein Reverse-Proxy ist ein Server, der übe...
Hadoop 3.1.1 Vollständig verteiltes Installationshandbuch unter CentOS 6.8 (empfohlen)
Vorstehend: Dieses Dokument basiert auf der Annah...
So erstellen Sie ein php-nginx-alpine-Image von Grund auf in Docker
Obwohl ich bereits einige Projekte in einer Docke...
Zusammenfassung und Praxis des Javascript-Prototyp-Kettendiagramms
Inhaltsverzeichnis Prototypenkette Wir können ein...
Lösung zum automatischen Absenden des Formulars und Springen zu anderen Seiten nach Drücken der Eingabetaste auf der Webseite
Nach dem Drücken der Eingabetaste auf der Webseite...
So aktualisieren Sie https unter Nginx
Kaufzertifikat Sie können es beim Cloud Shield Ce...
Detaillierte Erklärung der Mixins in Vue.js
Mixins stellen auf flexible Weise verteilte, wied...
Verwenden Sie das ab-Tool, um einen API-Stresstest auf dem Server durchzuführen
Inhaltsverzeichnis 1 Eine kurze Einführung in den...