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:

Automatische Wiedergabe der Informationsrotation im js-Dropdown-Menü
js Sinas Bildwiedergabe-Bildrotationseffektcode

<<: Detaillierte Erläuterung der Implementierungsmethode für Linux inotify-Echtzeitsicherungen

>>: Mysql-Indextypen und grundlegende Anwendungsbeispiele

Detaillierte Erklärung, wie man einen Docker-Container verlässt, ohne ihn zu schließen

js, um die Rotation von Webseitenbildern zu realisieren

1. Die Auswirkungen sind wie folgt:

2. Funktionen implementieren:

3. Implementierungscode:

4. Zusammenfassung:

Detaillierte Erklärung, wie man einen Docker-Container verlässt, ohne ihn zu schließen

Jedes Mal, wenn Docker einen Container startet, werden die IP und die Hosts mit den angegebenen Operationen

CSS verwendet die Pseudoklasse „placeholder-showed“, um den schwebenden Texteffekt des Eingabefelds zu erzielen

So aktivieren Sie die MySQL-Remoteverbindung

Dateisicherungslösung zwischen Servern: Wie sichere ich Serverdateien automatisch auf einem anderen Server?

Grundlegendes Prozessmanagement und Analyse der Umgebungszusammensetzung bei Linux-Betrieb und -Wartung

Zwei Möglichkeiten zum Zurücksetzen des Root-Passworts einer MySQL-Datenbank mit lnmp

Beispiel für die Implementierung einer lokalen Fuzzy-Suchfunktion in Front-End-JavaScript

Tipps zur Verwendung des Befehls „Docker Inspect“

Zusammenfassung der Nginx-Konfigurationsstandortmethode

Artikel empfehlen

MySQL-Replikation - ausführliche Erklärung und einfaches Beispiel

Einführung in die Verwendung des Select-Optgroup-Tags in HTML

Vue implementiert einen Wasserfallfluss mit unendlichem Laden

Verwenden Sie reines CSS, um einen Switch-Effekt zu erzielen

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.14

Detaillierte Erläuterung der häufig verwendeten Filter von Tomcat

Detaillierte Installation und Konfiguration von MySql auf dem Mac

Einfache Methode zur Installation von MySQL unter Linux

Analyse des benutzerdefinierten Überwachungs- und Alarmimplementierungsprozesses von Linux Zabbix

Verwenden Sie Vue, um die Funktion für handschriftliche Signaturen zu implementieren

Docker Consul-Übersicht und Schritte zum Erstellen einer Clusterumgebung (grafische Erklärung)

Reines CSS, um eine horizontale Linienanimation unter dem Element (Hintergrundbild) zu erreichen

Konfigurationsmethode für das Nginx-Anforderungslimit

Beispielanalyse der Verwendung von GROUP_CONCAT in MySQL

So installieren Sie Element UI und verwenden Vektorgrafiken in vue3.0