TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare una presentazione con JavaScript?

14

Sia che tu stia utilizzando un costruttore di siti Web o un sistema di gestione dei contenuti, è molto facile creare una presentazione per il tuo sito. Ad esempio, WordPress ha centinaia di plug-in per presentazioni e gallerie per creare fantastici slider in pochi minuti. Allo stesso modo, i costruttori di siti come Weebly offrono un elemento di presentazione e persino un framework come Bootstrap offre un elemento carosello. Tuttavia, quando crei un semplice sito HTML statico non ci sono opzioni diverse dall’inserimento del tuo codice di presentazione personalizzato. Se stai cercando un blocco di presentazione così autonomo, ecco un codice di presentazione completo con JavaScript.

Perché usare la presentazione?

L’aggiunta di una presentazione sul tuo sito aiuta in quanto segue:

  • Sembra elegante sulla tua pagina web.
  • L’aggiunta di una presentazione su una pagina di destinazione attirerà gli utenti.
  • Puoi mostrare alcune pagine importanti del tuo sito nelle diapositive e indirizzare il traffico verso quelle pagine.

Presentazione JavaScript

Sebbene siano disponibili molti plug-in per creare una presentazione già pronta, ecco il codice sorgente per creare una semplice presentazione utilizzando JavaScript. Puoi seguire la seguente procedura in due passaggi per aggiungere questa presentazione al tuo sito web.

1 script per presentazione

Copia e incolla lo script sottostante nella sezione piè di pagina della tua pagina web per inserire la presentazione. Puoi incollare il codice dopo la sezione del corpo della tua pagina web per evitare il blocco del rendering delle risorse in Google PageSpeed e migliorare la velocità di caricamento della pagina.

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

Il prossimo passo è copiare e incollare il codice HTML sottostante nella sezione della tua pagina. Puoi incollare questo codice quando vuoi che appaia la presentazione.

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

 Opzioni di personalizzazione per la presentazione

Puoi personalizzare l’aspetto della presentazione JavaScript utilizzando le opzioni seguenti.

  • Sostituisci le immagini nello script con le immagini del tuo sito vinte.
  • Aggiungi più immagini continuando l’array come Pic[0], Pic[1], Pic[2], ecc.
  • Regola l’altezza e la larghezza della presentazione nel codice HTML inserito nel file .
  • Modifica il bordo della tabella, gli attributi di cellpadding e cellspacing per aggiungere un bordo alla presentazione.
  • Puoi regolare la presentazione e la durata della dissolvenza in millisecondi secondo le tue necessità.

Come appare?

La presentazione apparirà come di seguito e ti consigliamo di utilizzare immagini a tutta larghezza per il tuo layout in modo che appaia bello.

Come creare una presentazione con JavaScript?

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More