TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka luoda diaesitys JavaScriptin avulla?

7

Käytitpä sitten verkkosivuston rakentajaa tai sisällönhallintajärjestelmää, diaesityksen luominen sivustollesi on erittäin helppoa. Esimerkiksi WordPressissä on satoja diaesityksen ja gallerian laajennuksia, joiden avulla voit luoda upeita liukusäätimiä muutamassa minuutissa. Samoin Weeblyn kaltaiset sivustonrakentajat tarjoavat diaesityselementin ja jopa Bootstrapin kaltainen kehys tarjoaa karusellielementin. Kuitenkin, kun luot tavallisen staattisen HTML -sivuston, ei ole muita vaihtoehtoja kuin oman mukautetun diaesityskoodin lisääminen. Jos etsit tällaista erillistä diaesityslohkoa, tässä on täydellinen diaesityskoodi JavaScript -koodilla.

Miksi käyttää diaesitystä?

Diaesityksen lisääminen sivustoosi auttaa seuraavissa tilanteissa:

  • Näyttää tyylikkäältä verkkosivullasi.
  • Diaesityksen lisääminen aloitussivulle houkuttelee käyttäjiä.
  • Voit näyttää muutamia sivustosi tärkeitä sivuja dioissa ja ohjata liikennettä näille sivuille.

JavaScript -diaesitys

Vaikka valmiita diaesityksiä voi luoda paljon laajennuksia, tässä on lähdekoodi yksinkertaisen kuvaesityksen luomiseksi JavaScriptin avulla. Voit lisätä tämän diaesityksen verkkosivustollesi noudattamalla alla olevaa kaksivaiheista prosessia.

1 Diaesityksen käsikirjoitus

Kopioi ja liitä alla oleva komentosarja verkkosivusi alatunnisteeseen lisätäksesi diaesityksen. Voit liittää koodin verkkosivusi runko -osan jälkeen, jotta vältyt hahmonnuksen estäviltä resursseilta Google PageSpeedissä ja parannat sivun latausnopeutta.

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

Seuraava vaihe on kopioida ja liittää alla oleva HTML -koodi sivusi osioon. Voit liittää tämän koodin, kun haluat diaesityksen näkyvän.

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

 Diaesityksen asetusten mukauttaminen

Voit muokata JavaScript -diaesityksen ulkoasua alla olevien vaihtoehtojen avulla.

  • Korvaa komentosarjan kuvat voitetuilla sivustosi kuvilla.
  • Lisää kuvia jatkamalla taulukkoa, kuten kuva [0], kuva [1], kuva [2] jne.
  • Säädä diaesityksen korkeutta ja leveyttä kohtaan.
  • Muuta taulukon reunan, solun täyttö- ja soluväli -määritteitä lisätäksesi diaesityksesi reunuksen.
  • Voit säätää diaesityksen ja häivytyksen kestoa millisekunteina tarpeen mukaan.

Miltä se näyttää?

Diaesitys näyttää seuraavanlaiselta ja suosittelemme käyttämään asettelussa täysleveitä kuvia, jotta se näyttää kauniilta.

Kuinka luoda diaesitys JavaScriptin avulla?

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. HyväksyäLisätietoja