TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie erstelle ich eine Diashow mit JavaScript?

89

Unabhängig davon, ob Sie einen Website-Builder oder ein Content-Management-System verwenden, ist es sehr einfach, eine Diashow für Ihre Website zu erstellen. WordPress verfügt beispielsweise über Hunderte von Diashow- und Galerie-Plugins, um in wenigen Minuten atemberaubende Slider zu erstellen. Ebenso bieten Site-Builder wie Weebly ein Slideshow-Element und sogar ein Framework wie Bootstrap bietet ein Karussell-Element. Wenn Sie jedoch eine einfache statische HTML-Site erstellen, gibt es keine anderen Optionen als das Einfügen Ihres eigenen benutzerdefinierten Diashow-Codes. Wenn Sie nach einem solchen eigenständigen Diashow-Block suchen, finden Sie hier einen vollständigen Diashow-Code mit JavaScript.

Warum Diashow verwenden?

Das Hinzufügen einer Diashow zu Ihrer Website hilft in folgenden Fällen:

  • Sieht auf Ihrer Webseite elegant aus.
  • Das Hinzufügen einer Diashow auf einer Landingpage wird Benutzer anziehen.
  • Sie können einige wichtige Seiten Ihrer Website in den Folien anzeigen und den Traffic auf diese Seiten steigern.

JavaScript-Diashow

Obwohl es viele Plugins gibt, um eine fertige Diashow zu erstellen, ist hier der Quellcode zum Erstellen einer einfachen Diashow mit JavaScript. Sie können die folgenden zwei Schritte befolgen, um diese Diashow zu Ihrer Website hinzuzufügen.

1 Skript für die Diashow

Kopieren Sie das folgende Skript und fügen Sie es in den Fußzeilenbereich Ihrer Webseite ein, um die Diashow einzufügen. Sie können den Code nach dem Hauptteil Ihrer Webseite einfügen, um zu verhindern, dass Ressourcen in Google PageSpeed ​​blockiert werden und die Seitenladegeschwindigkeit verbessert wird.

<script type="text/javascript"> // Set slideshow speed in milliseconds var slideShowSpeed = 3500; // Set duration of crossfade (seconds) var crossFadeDuration = 3; // Specify the image files var Pic = new Array(); // Just add as many as images as you want one by one // Replace the images with your own site images Pic[0] = 'Image1 URL Here' Pic[1] = 'Image2 URL Here' Pic[2] = 'Image3 URL Here' Pic[3] = 'Image4 URL Here' // do not edit anything below this line /*********************************************** * Get more website widget codes @ https://www.webnots.com/demos/ ***********************************************/ var t; var j = 0; var p = Pic.length; var preLoad = new Array(); for (i = 0; i < p; i++) { preLoad[i] = new Image(); preLoad[i].src = Pic[i]; } function runSlideShow() { if (document.all) { document.images.SlideShow.style.filter="blendTrans(duration=2)"; document.images.SlideShow.style.filter= "blendTrans(duration=crossFadeDuration)"; document.images.SlideShow.filters.blendTrans.Apply(); } document.images.SlideShow.src = preLoad[j].src; if (document.all) { document.images.SlideShow.filters.blendTrans.Play(); } j = j + 1; if (j > (p - 1)) j = 0; t = setTimeout('runSlideShow()', slideShowSpeed); } // End --> </script>

2 HTML für Diashow

Der nächste Schritt besteht darin, den folgenden HTML-Code zu kopieren und in den Abschnitt Ihrer Seite einzufügen. Sie können diesen Code einfügen, wenn die Diashow angezeigt werden soll.

<table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="" name='SlideShow' width=476 height=301> </td> </tr> </table> <script type="text/javascript"> runSlideShow(); </script>

 Anpassen der Optionen für die Diashow

Sie können das Aussehen der JavaScript-Diashow mit den folgenden Optionen anpassen.

  • Ersetzen Sie die Bilder im Skript durch Ihre gewonnenen Site-Bilder.
  • Fügen Sie weitere Bilder hinzu, indem Sie das Array wie Pic[0], Pic[1], Pic[2] usw. fortsetzen.
  • Passen Sie die Höhe und Breite Ihrer Diashow im HTML-Code an, der in der .
  • Ändern Sie die Attribute für Tabellenrahmen, Zellenabstand und Zellenabstand, um Ihrer Diashow einen Rahmen hinzuzufügen.
  • Sie können die Diashow- und Fade-Dauer in Millisekunden nach Ihren Wünschen anpassen.

Wie es aussieht?

Die Diashow sieht wie folgt aus und wir empfehlen, Bilder in voller Breite für Ihr Layout zu verwenden, damit es schön aussieht.

Wie erstelle ich eine Diashow mit JavaScript?

Aufnahmequelle: www.webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen