TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan lage en lysbildefremvisning med JavaScript?

29

Enten du bruker en nettstedbygger eller et innholdshåndteringssystem, er det veldig enkelt å lage en lysbildefremvisning for nettstedet ditt. For eksempel har WordPress hundrevis av lysbildefremvisninger og galleriprogrammer for å lage fantastiske glidebrytere på få minutter. På samme måte tilbyr nettstedbyggere som Weebly et lysbildefremvisningselement, og til og med et rammeverk som Bootstrap tilbyr et karusellelement. Når du oppretter et rent statisk HTML -nettsted, er det imidlertid ingen andre alternativer enn å sette inn din egen tilpassede lysbildefremvisningskode. Hvis du leter etter en slik frittstående lysbildefremvisning, er her en komplett lysbildefremvisningskode med JavaScript.

Hvorfor bruke lysbildefremvisning?

Å legge til en lysbildefremvisning på nettstedet ditt hjelper på følgende:

  • Ser elegant ut på nettsiden din.
  • Hvis du legger til en lysbildefremvisning på en destinasjonsside, vil det tiltrekke seg brukere.
  • Du kan vise få viktige sider på nettstedet ditt i lysbildene og få trafikk til disse sidene.

JavaScript lysbildefremvisning

Selv om det er mange plugins tilgjengelig for å lage en ferdig presentert lysbildefremvisning, her er kildekoden for å lage en enkel lysbildefremvisning ved hjelp av JavaScript. Du kan følge to -trinns prosessen nedenfor for å legge denne lysbildeserien til nettstedet ditt.

1 Skript for lysbildefremvisning

Kopier og lim inn skriptet nedenfor i bunnteksten på websiden for å sette inn lysbildeserien. Du kan lime inn koden etter brøddelen på nettsiden din for å unngå gjengivelse av blokkerende ressurser i Google PageSpeed og for å forbedre sidehastigheten.

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

Det neste trinnet er å kopiere og lime inn HTML -koden nedenfor i delen av siden din. Du kan lime inn denne koden når du vil at lysbildeserien skal vises.

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

 Tilpasse alternativer for lysbildefremvisning

Du kan tilpasse utseendet til JavaScript -lysbildefremvisningen ved å bruke alternativene nedenfor.

  • Erstatt bildene i skriptet med nettstedene du vant.
  • Legg til flere bilder ved å fortsette matrisen som Pic [0], Pic [1], Pic [2], etc.
  • Juster høyden og bredden på lysbildeserien i HTML -koden plassert i.
  • Endre tabellgrensen, cellestøtte og celleavstandsattributter for å legge til kantlinje i lysbildeserien.
  • Du kan justere lysbildeserien og visningsvarigheten i millisekunder etter behov.

Hvordan det ser ut?

Lysbildeserien vil se ut som nedenfor, og vi anbefaler å bruke bilder i full bredde for oppsettet slik at det ser vakkert ut.

Hvordan lage en lysbildefremvisning med JavaScript?

Opptakskilde: www.webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon