TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur skapar jag ett bildspel med JavaScript?

190

Oavsett om du använder en webbplatsbyggare eller ett innehållshanteringssystem är det väldigt enkelt att skapa ett bildspel för din webbplats. Till exempel har WordPress hundratals bildspel och galleri -plugins för att skapa fantastiska reglage på några minuter. På samma sätt erbjuder webbplatsbyggare som Weebly ett bildspelelement och till och med ett ramverk som Bootstrap erbjuder ett karusellelement. Men när du skapar en vanlig statisk HTML -webbplats finns det inga andra alternativ än att infoga din egen anpassade bildspelskod. Om du letar efter ett sådant fristående bildspelblock, här är en komplett bildspelskod med JavaScript.

Varför använda bildspel?

Att lägga till ett bildspel på din webbplats hjälper i följande:

  • Ser elegant ut på din webbsida.
  • Att lägga till ett bildspel på en målsida kommer att locka användare.
  • Du kan visa några viktiga sidor på din webbplats i bilderna och driva trafik till dessa sidor.

Bildspel med JavaScript

Även om det finns många plugins tillgängliga för att skapa ett färdigt bildspel, här är källkoden för att skapa ett enkelt bildspel med JavaScript. Du kan följa processen i två steg nedan för att lägga till detta bildspel på din webbplats.

1 Skript för bildspel

Kopiera och klistra in nedanstående skript i sidfotsdelen på din webbsida för att infoga bildspelet. Du kan klistra in koden efter kroppsdelen på din webbsida för att undvika att blockera resurser i Google PageSpeed och förbättra sidhämtningshastigheten.

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

Nästa steg är att kopiera och klistra in nedanstående HTML -kod i avsnittet på din sida. Du kan klistra in den här koden när du vill att bildspelet ska visas.

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

 Anpassa alternativ för bildspel

Du kan anpassa utseendet på JavaScript -bildspel med hjälp av alternativen nedan.

  • Ersätt bilderna i skriptet med dina vannwebbplatsbilder.
  • Lägg till fler bilder genom att fortsätta matrisen som Pic [0], Pic [1], Pic [2], etc.
  • Justera höjd och bredd på ditt bildspel i HTML -koden som placeras i.
  • Ändra tabellgränsen, cellpadding och cellavståndsattributen för att lägga till kant i ditt bildspel.
  • Du kan justera bildspelet och blekningstiden i millisekunder enligt dina behov.

Hur det ser ut?

Bildspelet kommer att se ut nedan och vi rekommenderar att du använder bilder i full bredd för din layout så att det ser vackert ut.

Hur skapar jag ett bildspel med JavaScript?

Inspelningskälla: www.webnots.com

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer