js, um die Rotation von Webseitenbildern zu realisieren
|
In diesem Artikel wird der spezifische Code von js zur Realisierung der Rotation von Webseitenbildern zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt 1. Die Auswirkungen sind wie folgt:
2. Funktionen implementieren:(1) Nach einem Klick auf den linken bzw. rechten Pfeil wird das darunter angezeigte Bild durch das entsprechende vorherige bzw. nächste Bild ersetzt. (2) Wenn Sie in der Navigation auf ein Bild klicken, wird Ihnen das entsprechende Bild darunter angezeigt, und wenn Sie erneut auf das vorherige oder nächste Bild klicken, wird Ihnen das entsprechende Bild angezeigt (3) Die Bildadresse kann aus dem Internet stammen oder ein von Ihrem eigenen Server gesendetes String-Array sein. 3. Implementierungscode:(1) Verzeichnisstruktur:
(2) Der Codeinhalt von index.html ist wie folgt: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Bilddrehung</title>
<script type="text/javascript" src="js/showPic.js"></script>
<link rel="stylesheet" type="text/css" href="css/meinstyle.css"/>
</Kopf>
<Text>
<img id="Bild" src="Bild/1.jpg"alt="mein Bild"/>
<div id="navigieren">
<ul id="Bild">
<li>
<a href="#" title="Linker Pfeil" οnclick="clickTurnLeft();">
<img src="bild/left_aim.jpg" id="leftAim">
</a>
</li>
<li>
<a href="image/1.jpg" title="Blumen" οnclick="showPic(this);return false;">
<img src="image/1.jpg" id="smallPic" alt="Blumenvorschau">
</a>
</li>
<li>
<a href="image/2.jpg" title="Weißer Schnee" click="showPic(this);return false;">
<img src="image/2.jpg" id="smallPic"alt="Schnee-Miniaturansicht">
</a>
</li>
<li>
<a href="image/3.jpg" title="Fliegender Vogel" οnclick="showPic(this);return false;">
<img src="image/3.jpg" id="smallPic"alt="Vogel-Miniaturansicht">
</a>
</li>
<li>
<a href="image/4.jpg" title="Felsen" click="showPic(this);return false;">
<img src="image/4.jpg" id="smallPic"alt="Stein-Miniaturansicht">
</a>
</li>
<li>
<a href="#" title="Rechtspfeil" οnclick="clickTurnRight();">
<img src="image/right_aim.jpg" id="rightAim"alt="Nach rechts drehen">
</a>
</li>
</ul>
</div>
</body>
</html>(3) Der Codeinhalt von mystyle.css ist wie folgt: /* mystyle.css-Code */
Körper {
Textausrichtung: zentriert
}
#navigieren{
Rand: 0 automatisch;
Breite: 1100px;
Höhe: 100px;
}
ul{
Rand rechts: automatisch; Rand links: automatisch;
}
li{
schweben: links;
Polsterung: 10px;
Listenstil: keiner;
}
#leftAim{
Breite: 100px;
Höhe: 100px;
}
#kleinesBild{
Breite: 180px;
Höhe: 120px;
Rand: 2px, durchgehend schwarz;
}
#richtigesZiel{
Breite: 100px;
Höhe: 100px;
}
#Bild{
Anzeige:Block;
Breite: 800px;
Höhe: 600px;
Rand: 0 automatisch;
}(4) Der Codeinhalt von showPic.js ist wie folgt: //showPic.js
var href = neues Array("Bild/1.jpg","Bild/2.jpg","Bild/3.jpg","Bild/4.jpg");
Var-Index = 0;
Funktion klickLinksabbiegen() {
wenn (Index == 0) {
Index = href.Länge – 1;
} anders {
index = --index % href.länge ;
}
var Bild = document.getElementById("Bild");
Bild.setAttribute("src",href[index]);
}
Funktion klickRechtsabbiegen(){
index = ++index % href.Länge;
var Bild = document.getElementById("Bild");
Bild.setAttribute("src",href[index]);
}
Funktion zeigeBild(welchesBild){
var Quelle = whichPic.getAttribute("href");
index = href.indexOf(Quelle);
var Bild = document.getElementById("Bild");
Bild.setAttribute("src",Quelle);
}4. Zusammenfassung:In der JS-Datei ist ein Array von Bildnamen definiert. Dieses Array kann die vom Server zurückgegebenen Bildadressdaten oder die Bildadresse im Netzwerk sein. 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:
|
<<: Detaillierte Erläuterung der Implementierungsmethode für Linux inotify-Echtzeitsicherungen
>>: Mysql-Indextypen und grundlegende Anwendungsbeispiele
Artikel empfehlen
Vue2-Implementierungen bieten Injection für Reaktionsfähigkeit
1. Konventionelles Schreiben in vue2 // Die überg...
Zählen Sie die Listen-Tags in HTML
1. <dl> definiert eine Liste, <dt> de...
Erfahren Sie, wie Sie einen Hadoop 3.x-Pseudocluster auf der Tencent Cloud erstellen
1. Umweltvorbereitung CentOS Linux Version 7.5.18...
Grafisches Tutorial zu MySQL-Downloads und Installationsdetails
1. Um die MySQL-Datenbank herunterzuladen, besuch...
Einführung in die Installation des Vim-Plugins unter Linux
Inhaltsverzeichnis Installieren Sie den Vim-Plugi...
Detaillierte Erläuterung des Implementierungsprinzips der bidirektionalen Datenbindung von Vue2.0/3.0
Das Implementierungsprinzip der bidirektionalen D...
So passen Sie einen EventEmitter in node.js an
Inhaltsverzeichnis Vorwort 1. Was ist 2. So verwe...
CSS-Listenverschiebung, um zu verhindern, dass sie von unten verdeckt wird, und um sich an die längere Verarbeitung des Bildschirmmodells anzupassen
1. Wenn das mobile Endgerät die Listenverschiebun...
Detaillierte Analyse des React Native-Startvorgangs
Einführung: Dieser Artikel verwendet das von reac...
Vue verbessert die Seitenantwortgeschwindigkeit durch Lazy Loading
Inhaltsverzeichnis Überblick Was ist Lazy Loading...
So führen Sie in MySQL eine Abfrage-Zwischenspeicherung durch und beheben Fehler
Wir alle wissen, dass wir die Eigenschaften der P...
Basierend auf den neuen Funktionen von JavaScript ES: Schlüsselwörter let und const
Inhaltsverzeichnis 1. let-Schlüsselwort 1.1 Grund...
Detaillierte Erläuterung der Wissenspunkte zum MySQL Strict Mode
I. Erläuterung des strikten Modus Gemäß den Einsc...
Die CSS-Priorität der Webseite wird für Sie ausführlich erklärt
Bevor wir über die CSS-Priorität sprechen, müssen...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.13 winx64 (win10)
In diesem Artikel finden Sie das grafische Tutori...