TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak stworzyć pokaz slajdów za pomocą JavaScript?

166

Niezależnie od tego, czy korzystasz z kreatora stron internetowych, czy systemu zarządzania treścią, bardzo łatwo jest utworzyć pokaz slajdów dla swojej witryny. Na przykład WordPress ma setki wtyczek do pokazów slajdów i galerii, dzięki którym w kilka minut stworzysz oszałamiające suwaki. Podobnie twórcy witryn, tacy jak Weebly, oferują element pokazu slajdów, a nawet framework, taki jak Bootstrap, oferuje element karuzeli. Jednak podczas tworzenia zwykłej statycznej witryny HTML nie ma opcji innych niż wstawienie własnego niestandardowego kodu pokazu slajdów. Jeśli szukasz takiego samodzielnego bloku pokazu slajdów, oto kompletny kod pokazu slajdów z JavaScript.

Dlaczego warto korzystać z pokazu slajdów?

Dodanie pokazu slajdów w witrynie pomaga w następujących kwestiach:

  • Wygląda elegancko na Twojej stronie internetowej.
  • Dodanie pokazu slajdów na stronie docelowej przyciągnie użytkowników.
  • Możesz pokazać na slajdach kilka ważnych stron w swojej witrynie i przyciągnąć do nich ruch.

Pokaz slajdów JavaScript

Chociaż dostępnych jest wiele wtyczek do tworzenia gotowego pokazu slajdów, oto kod źródłowy do tworzenia prostego pokazu slajdów za pomocą JavaScript. Możesz wykonać poniższy dwuetapowy proces, aby dodać ten pokaz slajdów do swojej witryny.

1 skrypt do pokazu slajdów

Skopiuj i wklej poniższy skrypt w sekcji stopki swojej strony internetowej, aby wstawić pokaz slajdów. Możesz wkleić kod za sekcją treści swojej strony internetowej, aby uniknąć blokowania zasobów renderowania w Google PageSpeed i poprawić szybkość ładowania strony.

<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 do pokazu slajdów

Następnym krokiem jest skopiowanie i wklejenie poniższego kodu HTML w sekcji swojej strony. Możesz wkleić ten kod, gdy chcesz, aby pojawił się pokaz slajdów.

<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>

 Dostosowywanie opcji pokazu slajdów

Możesz dostosować wygląd pokazu slajdów JavaScript, korzystając z poniższych opcji.

  • Zastąp obrazy w skrypcie obrazami wygranej witryny.
  • Dodaj więcej obrazów, kontynuując tablicę, taką jak Pic[0], Pic[1], Pic[2] itp.
  • Dostosuj wysokość i szerokość pokazu slajdów w kodzie HTML umieszczonym w .
  • Zmień atrybuty obramowania tabeli, wypełnienia komórek i odstępu między komórkami, aby dodać obramowanie do pokazu slajdów.
  • Możesz dostosować czas trwania pokazu slajdów i zanikania w milisekundach zgodnie z potrzebami.

Jak to wygląda?

Pokaz slajdów będzie wyglądał jak poniżej i zalecamy użycie obrazów o pełnej szerokości w układzie, aby wyglądał pięknie.

Jak stworzyć pokaz slajdów za pomocą JavaScript?

Źródło nagrywania: www.webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów