Bannière aléatoire ou défilante

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Tutoriel Bannière aléatoire ou défilante

Message par Threax le Sam 14 Fév 2009 - 17:44

Créer une bannière aléatoire ou défilante


Ce tutoriel va vous expliquer comment créer une bannière aléatoire, c'est-à-dire une bannière qui change à chaque actualisation et à chaque changement de page.
Ce tutoriel vous expliquera aussi comment créer une bannière défilante, c'est-à-dire une bannière dont les images défilent les unes après les autres.

Mise en place


Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript est activée, puis créez un nouveau javascript ayant pour titre "Bannière aléatoire" et pour placement "Toutes les pages".

Pour une bannière aléatoire, insérez-y le code suivant :

Code:
$(function() {
  var a = [
    "https://adresse1",
    "https://adresse2",
    "https://adresse3",
  ];

  $("#pun-logo img,#i_logo,#logo img").attr("src", a[Math.floor(Math.random() * a.length)])
});

Pour une bannière défilante, insérez-y ce script :
Code:
$(function() {
  var duration = 7;
  var a = [
    "https://adresse1",
    "https://adresse2",
    "https://adresse3",
  ];

  b=function(){$("#pun-logo img,#i_logo,#logo img").attr("src",a[Math.floor(Math.random()*a.length)])};b();setInterval(b,duration*1000);

});


Personnalisation

Pour modifier les adresses des images, vous devez modifier chacune des lignes de la variable a (vous pouvez en ajouter ou en retirer), en veillant à conserver les guillemets et la virgule en fin de ligne.

Pour modifier le temps de chaque bannière dans le cas d'une bannière défilante, vous devez modifier la variable duration, c'est à dire le chiffre 7 (en secondes).

avatar

Threax
Membre actif

Masculin
Messages : 17276
Inscrit(e) le : 27/08/2005

http://lesforumsde.forumactif.com
Threax a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum