js implementiert das Umschalten von Bildern per Maus (ohne Timer)
|
In diesem Artikelbeispiel wird der spezifische Code von js zur Realisierung des Mauswechselbilds als Referenz geteilt. Der spezifische Inhalt ist wie folgt Um den Effekt zu erzielen, können Sie die Maus über die entsprechenden kleinen Punkte bewegen oder auf die Pfeile auf der linken und rechten Seite klicken, um die Bilder zu wechseln. Die Seitenzahl des Bildes wird über dem Bild angezeigt und der Titel des entsprechenden Bildes wird darunter angezeigt. Der vollständige Code lautet wie folgt:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Bildwechsel</title>
<Stil>
.Bild {
Position: relativ;
Breite: 500px;
Höhe: 333px;
Rand: 0 automatisch;
Rand: 2px durchgezogenes RGB (231, 127, 217);
Überlauf: versteckt;
}
.radius {
Breite: 100 %;
Höhe: 10px;
Position: absolut;
unten: 30px;
Textausrichtung: zentriert;
}
.pg { //Seitenzahl über der Bildposition: absolute;
Rand: 0;
Breite: 100 %;
Höhe: 20px;
Hintergrundfarbe: rgba(0, 0, 0, .4);
Textausrichtung: zentriert;
Schriftgröße: 16px;
Schriftstärke: 600;
Farbe: #fff;
}
.Titel {
Position: absolut;
Breite: 100 %;
unten: 0px;
Textausrichtung: zentriert;
Schriftgröße: 16px;
Schriftstärke: 600;
Farbe: rgb(21, 223, 72);
}
Spanne {
Anzeige: Inline-Block;
Rand: 10px durchgezogen #fdfdfd;
Randradius: 50 %;
}
.aktiv {
Rand: 10px durchgezogen #656466;
}
/* Pfeile nach links und rechts */
.Pfeilspitze-links,
.Pfeilspitze-rechts {
Position: absolut;
Breite: 41px;
Höhe: 69px;
Schriftgröße: 30px;
Zeilenhöhe: 70px;
Textausrichtung: zentriert;
Farbe: #D6D8D4;
Hintergrundfarbe: rgba(0,0,0,.3);
}
.Pfeilspitze-links {
links: 0;
oben: 40%;
}
.Pfeilspitze-rechts {
rechts: 0;
oben: 40%;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Bild">
<!-- Bildseitennummer-->
<p class="pg">Abdeckung</p>
<img src="./image/d8.jpeg" alt="">
<!-- Kleine Punkte -->
<p Klasse="Radius"></p>
<!-- Titel unter dem Bild-->
<p class="title">Titel</p>
<!-- Pfeile nach links und rechts -->
<div Klasse="arrowhead-left" id="al"> < </div>
<div Klasse="arrowhead-right" id="ar"> > </div>
</div>
<Skript>
var Adresse = ["./image/d1.jpeg", "./image/d2.jpeg", "./image/d3.jpeg", "./image/d4.jpeg", "./image/d5.jpeg", "./image/d7.jpeg"];
// var imgs = document.getElementsByTagName("img");
var imgs = document.querySelector("img");
var len = Adresse.Länge;
var str = "";
var pp = document.getElementsByTagName("p"); //Eine Sammlung abrufen // var pp = document.querySelector("p"); //Ein Element abrufen var al = document.getElementById("al");
var ar = document.getElementById("ar");
//Span-Tag hinzufügen für (i = 0; i < len; i++) {
str += ' <span></span>'
}
konsole.log(str);
konsole.log(pp);
pp[1].innerHTML = str;
var spans = pp[1].getElementsByTagName('span');
spans[0].className = "aktiv";
für (i = 0; i < länge; i++) {
Spannen[i].index = i;
spans[i].onmouseover = function () { //Die Klasse aller Punkte ist leer for (i = 0; i < len; i++) {
spans[i].className = "";
}
this.className = 'active'; //Fügen Sie dem angeklickten Bereich (Punkt) einen Klassennamen hinzu imgs.src = address[this.index];
pp[0].innerHTML = [this.index + 1] + "/6";
pp[2].innerHTML = "Landschaft" + [this.index + 1];
}
}
var n = 0;
ar.onclick = Funktion () {
für (i = 0; i < länge; i++) {
spans[i].className = "";
}
spans[n].className = "aktiv";
imgs.src = Adresse[n];
pp[0].innerHTML = (n+1) + "/6";
pp[2].innerHTML = "Landschaft" +(n+1);
wenn (n<5) {
n++;
}
anders {
n = 0;
}
}
al.onclick = Funktion () {
für (i = 0; i < länge; i++) {
spans[i].className = "";
}
spans[n].className = "aktiv";
imgs.src = Adresse[n];
pp[0].innerHTML = (n+1) + "/6";
pp[2].innerHTML = "Landschaft" +(n+1);
wenn (n>0) {
N--;
}
anders {}
n=(Länge-1);
}
}
</Skript>
</body>
</html>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:
|
>>: Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.13 (Win10 64 Bit)
Artikel empfehlen
Detaillierte Schritte zum Debuggen von VUE-Projekten in IDEA
Um JS-Code zu debuggen, müssen Sie jedes Mal eine...
Verwendung und Szenarioanalyse des npx-Befehls in Node.js
Tutorial zur Verwendung von NPX Heute Abend, als ...
Untersuchung und Korrektur des seltsamen Verhaltens von parseInt() in js
Hintergrund: Ich frage mich, ob Ihnen aufgefallen...
Der Unterschied zwischen ID- und Name-Attributen von HTML-Elementen
Heute bin ich etwas verwirrt über <a href="...
Grundlegendes Lernprogramm zum Tabellen-Tag in HTML
Zusammensetzung der Tabellenbeschriftung Die Tabe...
Docker nginx implementiert einen Host zum Bereitstellen mehrerer Sites
Die virtuelle Maschine, die ich von einer bestimm...
Detaillierte Schritte zur Installation von Tomcat, MySQL und Redis mit Docker
Inhaltsverzeichnis Tomcat mit Docker installieren...
MySQL slow_log-Tabelle kann nicht in InnoDB-Engine geändert werden – detaillierte Erklärung
Hintergrund Das Abrufen des langsamen Abfrageprot...
Werbefähigkeiten im Baidu Union-Umfeld (grafisches Tutorial)
Kürzlich haben Studierende des User Experience-Tea...
Beispiel für die Verwendung von CSS zum Erzielen eines halbtransparenten Hintergrunds und undurchsichtigen Textes
Dieser Artikel stellt ein Beispiel vor, wie man m...
Tiefgreifendes Verständnis von UID und GID in Docker-Containern
Standardmäßig werden Prozesse im Container mit Ro...
So fragen Sie Bilder in einem privaten Register ab oder erhalten sie
Docker fragt Bilder in einem privaten Register ab...
Tutorial zu HTML-Tabellen-Tags (27): Zell-Hintergrundbild-Attribut BACKGROUND
Wir können ein Hintergrundbild für die Zelle fest...
Gemeinsame Nutzung von zwei Plug-Ins zur Übersetzung von Webseiten
Übersetzen Sie diese URL: http://translateth.is G...
Lassen Sie IE6, IE7, IE8 CSS3-abgerundete Ecken und Schattenstile unterstützen
Ich möchte eine Seite mit CSS3-abgerundeten Ecken...