TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment créer un diaporama avec JavaScript ?

451

Que vous utilisiez un constructeur de site Web ou un système de gestion de contenu, il est très facile de créer un diaporama pour votre site. Par exemple, WordPress propose des centaines de plugins de diaporamas et de galeries pour créer de superbes curseurs en quelques minutes. De même, les constructeurs de sites comme Weebly proposent un élément diaporama et même un framework comme Bootstrap propose un élément carrousel. Cependant, lorsque vous créez un site HTML statique simple, il n’y a pas d’autres options que l’insertion de votre propre code de diaporama personnalisé. Si vous recherchez un tel bloc de diaporama autonome, voici un code de diaporama complet avec JavaScript.

Pourquoi utiliser le diaporama ?

L’ajout d’un diaporama sur votre site aide dans les cas suivants :

  • Semble élégant sur votre page Web.
  • L’ajout d’un diaporama sur une page de destination attirera les utilisateurs.
  • Vous pouvez afficher quelques pages importantes de votre site dans les diapositives et générer du trafic vers ces pages.

Diaporama JavaScript

Bien qu’il existe de nombreux plugins disponibles pour créer un diaporama prêt à l’emploi, voici le code source pour créer un diaporama simple à l’aide de JavaScript. Vous pouvez suivre le processus en deux étapes ci-dessous pour ajouter ce diaporama à votre site Web.

1 script pour le diaporama

Copiez et collez le script ci-dessous dans la section pied de page de votre page Web pour insérer le diaporama. Vous pouvez coller le code après la section corps de votre page Web pour éviter de bloquer le rendu des ressources dans Google PageSpeed et améliorer la vitesse de chargement de la page.

<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 pour le diaporama

L’étape suivante consiste à copier et coller le code HTML ci-dessous dans la section de votre page. Vous pouvez coller ce code lorsque vous souhaitez que le diaporama apparaisse.

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

 Options de personnalisation pour le diaporama

Vous pouvez personnaliser l’apparence du diaporama JavaScript en utilisant les options ci-dessous.

  • Remplacez les images du script par les images de votre site gagnées.
  • Ajoutez plus d’images en continuant le tableau comme Pic[0], Pic[1], Pic[2], etc.
  • Ajustez la hauteur et la largeur de votre diaporama dans le code HTML placé dans le fichier .
  • Modifiez la bordure du tableau, les attributs cellpadding et cellspacing pour ajouter une bordure à votre diaporama.
  • Vous pouvez ajuster le diaporama et la durée du fondu en millisecondes selon vos besoins.

À quoi ça ressemble?

Le diaporama ressemblera à ci-dessous et nous vous recommandons d’utiliser des images pleine largeur pour votre mise en page afin qu’elle soit belle.

Comment créer un diaporama avec JavaScript ?

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails