JavaScript zum Erreichen eines einfachen Bildwechsels
|
In diesem Artikel wird der spezifische Code für JavaScript zur einfachen Bildumschaltung als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt Zum Wechseln der Bilder gibt es mehrere Möglichkeiten: Methode 1 (für Anfänger! Leicht verständlich) Der Code ist unten angehängt:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Bildschalter 2</title>
<style type="text/css">
*{
Polsterung: 0;
Rand: 0;
}
#Kasten{
Rand: 1px durchgezogen #ccc;
Breite: 450px;
Höhe: 70px;
Polsterung oben: 450px;
Hintergrund: URL("img/big_pic01.jpg") keine Wiederholung;
}
#box ul li{
schweben: links;
Polsterung links: 10px;
}
</Stil>
</Kopf>
<Text>
<div id="box">
<ul>
<li id="Artikel1">
<img src="img/pic01.webp">
</li>
</ul>
<ul>
<li id="Artikel2">
<img src="img/pic02.webp">
</li>
</ul>
<ul>
<li id="Artikel3">
<img src="img/pic03.webp">
</li>
</ul>
<ul>
<li id="Artikel4">
<img src="img/pic04.webp">
</li>
</ul>
<ul>
<li id="Artikel5">
<img src="img/pic05.webp">
</li>
</ul>
</div>
<Skripttyp="text/javascript">
//Schreibmethode für Anfänger // 1. Holen Sie sich die Ereignisquelle var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");
var item4 = document.getElementById("item4");
var item5 = document.getElementById("item5");
var oBos = document.getElementById("box");
// 2. Ereignis item1.onmouseover = function (){ hinzufügen
//Wenn die Maus über die entsprechende ID bewegt wird, ändert sich der Bildpfad oBos.style.background = "url('img/big_pic01.jpg') no-repeat";
}
item2.onmouseover = Funktion (){
oBos.style.background = "url('img/big_pic02.jpg') keine Wiederholung";
}
item3.onmouseover = Funktion (){
oBos.style.background = "url('img/big_pic03.jpg') keine Wiederholung";
}
item4.onmouseover = Funktion (){
oBos.style.background = "url('img/big_pic04.jpg') keine Wiederholung";
}
item5.onmouseover = Funktion (){
oBos.style.background = "url('img/big_pic05.jpg') keine Wiederholung";
}
</Skript>
</body>
</html> Der obige JS-Code ist möglicherweise umständlich und kann leicht zu Code-Redundanz führen. Nehmen wir dann einige Änderungen vor und schauen uns Methode 2 an:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Bildschalter 2</title>
<style type="text/css">
*{
Polsterung: 0;
Rand: 0;
}
#Kasten{
Rand: 1px durchgezogen #ccc;
Breite: 450px;
Höhe: 70px;
Polsterung oben: 450px;
Hintergrund: URL("img/big_pic01.jpg") keine Wiederholung;
}
#box ul li{
schweben: links;
Polsterung links: 10px;
}
</Stil>
</Kopf>
<Text>
<div id="box">
<ul>
<li id="Artikel1">
<img src="img/pic01.webp">
</li>
</ul>
<ul>
<li id="Artikel2">
<img src="img/pic02.webp">
</li>
</ul>
<ul>
<li id="Artikel3">
<img src="img/pic03.webp">
</li>
</ul>
<ul>
<li id="Artikel4">
<img src="img/pic04.webp">
</li>
</ul>
<ul>
<li id="Artikel5">
<img src="img/pic05.webp">
</li>
</ul>
</div>
<Skripttyp="text/javascript">
// 1. Holen Sie sich die Ereignisquelle. Dies erspart viel Variablendefinitionsaufwand. Funktion $(id){
Rückgabetyp der ID === "Zeichenfolge"?document.getElementById(id):null;
}
// Ändere das Hintergrundbild. liId ist die ID, auf die verwiesen wird, und imgSrc ist der Parameter, an den das Hintergrundbild in der Funktion changebgcImg(liId,imgSrc){ übergeben wird.
// 2. Ereignis hinzufügen $(liId).onmouseover = function (){
// 3. Ändern Sie das Hintergrundbild $("box").style.background = imgSrc;
}
}
changebgcImg("item1",'url("img/big_pic01.jpg") keine Wiederholung');
changebgcImg("item2",'url("img/big_pic02.jpg") keine Wiederholung');
changebgcImg("item3",'url("img/big_pic03.jpg") keine Wiederholung');
changebgcImg("item4",'url("img/big_pic04.jpg") keine Wiederholung');
changebgcImg("item5",'url("img/big_pic05.jpg") keine Wiederholung');
</Skript>
</body>
</html> Wie Sie sehen, verwendet Methode 2 weniger JS-Code als Methode 1. Nach den oben genannten Änderungen können wir uns Methode drei ansehen:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Bildwechsel Vollversion</title>
<style type="text/css">
*{
Polsterung: 0;
Rand: 0;
}
#Kasten{
Rand: 1px durchgezogen #ccc;
Breite: 450px;
Höhe: 70px;
Polsterung oben: 450px;
Hintergrund: URL("img/big_pic01.jpg") keine Wiederholung;
}
#box ul li{
schweben: links;
Polsterung links: 10px;
}
</Stil>
</Kopf>
<Text>
<div id="box">
<ul>
<li Klasse="Artikel">
<img src="img/pic01.webp">
</li>
</ul>
<ul>
<li Klasse="Artikel">
<img src="img/pic02.webp">
</li>
</ul>
<ul>
<li Klasse="Artikel">
<img src="img/pic03.webp">
</li>
</ul>
<ul>
<li Klasse="Artikel">
<img src="img/pic04.webp">
</li>
</ul>
<ul>
<li Klasse="Artikel">
<img src="img/pic05.webp">
</li>
</ul>
</div>
<Skripttyp="text/javascript">
// 1. Holen Sie sich die Ereignisquellenfunktion $(id){
Rückgabetyp der ID === „Zeichenfolge“? document.getElementById(id):null;
}
// Alle li-Tags mit dem Namen „item“ unten abrufen var items = document.getElementsByClassName("item");
// konsole.log(Elemente);
für (var i=0;i<items.length;i++){
var item = items[i];
Element.index = i+1;
Elemente[i].onmouseover = Funktion (){
$("box").style.background = `url("img/big_pic0${this.index}.jpg") keine Wiederholung`
// Sie können ${i} nicht direkt setzen, sondern müssen die Variable item neu definieren, da das in der Funktion aufgerufene i eine globale Variable ist und i nach der for-Schleife immer auf 5 zeigt
// $("box").style.background = `url("img/big_pic0${i}.jpg") keine Wiederholung`
}
}
</Skript>
</body>
</html>Mit allen drei Methoden kann der Bildwechseleffekt erzielt werden (die erste Methode wird nicht empfohlen, wenn viele Bilder vorhanden sind und die Anzahl der anzuzeigenden Bilder nicht gleich ist). Die Bildwechseleffekte sind wie folgt:
Ich habe auch einen Blogbeitrag, der auch Bildwechseleffekte implementiert. Die verwendeten Methoden unterscheiden sich geringfügig von diesen drei. Sie können darauf verweisen, daher werde ich sie vorerst nicht zusammenführen: JavaScript zum Implementieren von Taobao-Produktbildwechseleffekten 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:
|
<<: Kontinuierliche Bereitstellung mit Jenkins und Docker unter Docker
>>: Beispiel für die Verwendung des Nginx-Reverse-Proxys für Go-FastDFS
Artikel empfehlen
Teilen Sie einige ungewöhnliche, aber nützliche JS-Techniken
Vorwort Programmiersprachen enthalten normalerwei...
Vollständige Schritte zum Erstellen eines Hochleistungsindex in MySQL
Inhaltsverzeichnis 1. Index-Grundlagen 1. Arten v...
js, um eine einfache Lotteriefunktion zu erreichen
In diesem Artikel wird der spezifische Code von j...
So lösen Sie das Problem der Groß-/Kleinschreibung bei MySQL-Abfragen
Frage Als ich kürzlich ein praktisches Projekt mi...
So fragen Sie Datum und Uhrzeit in MySQL ab
Vorwort: Bei der Projektentwicklung werden in ein...
Zusammenfassung praktischer Fähigkeiten, die häufig in Vue-Projekten verwendet werden
Inhaltsverzeichnis Vorwort 1. Verwenden Sie $attr...
So wählen Sie zwischen MySQL CHAR und VARCHAR
Inhaltsverzeichnis VARCHAR- und CHAR-Typen Abschl...
MySQL 5.7.29 + Win64-Dekomprimierungsversion Installations-Tutorial mit Bildern und Text
Laden Sie die offizielle Website herunter Wählen ...
So verwenden Sie CSS, um das übergeordnete Container-Div mit img-Bildern zu füllen und die Containergröße anzupassen
Wenn auf einer Seite mehrere Bilder eingefügt wer...
Detaillierte Erklärung zur Verwendung von Bussen in Vue
Vue-Busmechanismus (Bus) Zusätzlich zur Verwendun...
Beispiel zum Verlassen der Schleife in Array.forEach in js
Inhaltsverzeichnis forEach() Methode So springen ...
Implementierung des MySQL Shell import_table-Datenimports
Inhaltsverzeichnis 1. Einführung in import_table ...
Erklärung der Rückgabe einer MySQL-Tabelle führt zur Ungültigkeit des Index
Einführung Wenn die MySQL InnoDB-Engine Datensätz...
So mounten Sie eine neue Festplatte auf einem Linux-Cloud-Server
Hintergrund Im Unternehmen wurde ein neuer Server...
So erhalten Sie die Schnittmenge/Differenz/Vereinigung zweier Mengen in MySQL
Typische MySQL-Szenarien: Schnittmenge und Differ...