banniere animee defilante diaporama code javascript

obtenir ces boutons

Créer son diaporama : 6° partie

Code pour créer une bannière animée

Mis à jour le 25 février 2012.

Une page qui suit reproduit le code qui permet d'obtenir un bandeau d'images miniatures dans l'en-tête en-dessous du titre.

La page précédente explique comment créer un diaporama.

Cette page explique comment ajouter un diaporama simplifié.

Ce gadget fait défiler dans l'ordre (pour éviter les répétitions), toutes les 3 secondes, 6 images différentes. La première image est choisie de manière aléatoire afin de ne pas toujours afficher en premier la même image à chaque changement de page.

Code : coller les instructions suivantes dans un gadget HTML/JavaScript :

<script language="JavaScript">

var dia1Image = new Array();

dia1Image[0] = 'http://... .jpg';
dia1Image[1] = 'http://... .jpg';
dia1Image[2] = 'http://... .jpg';
dia1Image[3] = 'http://... .jpg';
dia1Image[4] = 'http://... .jpg';
dia1Image[5] = 'http://... .jpg';

dia1Lien = new Array();

dia1Lien[0] = "http://modifier-les-modeles-de-blogger.blogspot.com/2011/12/derniers-messages.html";

var dia1compteur = parseInt(Math.random()*dia1Image.length);
var dia1compteur2 = 0;
var dia1defiler = 16;
var dia1debut=1;
function dia1defilement() {document.write('<img style="display:none;" border="0" name="dia1defil2" />');document.write('<a href="#" onclick="window.open(dia1Lien[0]);return(false)"><img style="width: 905px; height: 127px;background:transparent;border:none;" name="dia1defil" /></a>');dia1compteurmax();}
function dia1compteurmax(){dia1intervalle = setTimeout("dia1compteurmax()",3000);if (dia1defiler == 16) dia1compteur++;if (dia1defiler == 15) dia1compteur=dia1compteur-1;if (dia1compteur == 0) {dia1compteur = dia1Image.length;};if (dia1compteur == (dia1Image.length+1)) {dia1compteur = 1;};
if (dia1debut==1) {document.dia1defil2.src = dia1Image[dia1compteur-1]};dia1debut=0;
dia1compteur2=dia1compteur+1;if (dia1defiler == 2) dia1compteur2=dia1compteur-1;
if (dia1defiler == 15) dia1compteur2=dia1compteur-1;
if (dia1compteur2 == (dia1Image.length+1)) {dia1compteur2 = 1;};
if (dia1compteur2 == 0) {dia1compteur2 = dia1Image.length;};
document.dia1defil2.src = dia1Image[dia1compteur2-1];
document.dia1defil.src = dia1Image[dia1compteur-1];}
</script><center><script language="javascript">dia1defilement()</script></center><br/>

Comment ajouter un gadget HTML/JavaScript sur un blog

Adaptations :
- on peut changer les adresses des images (dia1Image[0] ...), en ajouter et en supprimer ;
- pour changer la taille du diaporama, modifier : style="width: 905px; height: 127px;
- la vitesse de rotation (toutes les 3 secondes) est déterminée par la valeur de: ("dia1compteurmax()",3000) : augmenter ou diminuer 3000 ;
- ...


On peut cliquer sur une des images et être transféré vers une autre page, LA MÊME page quelle que soit l'image affichée.

EXEMPLE : CLIQUER ICI.

Pour supprimer cette option, remplacer :

document.write('<a href="#" onclick="window.open(dia1Lien[0]);return(false)"><img style="width: 905px; height: 127px;background:transparent;border:none;" name="dia1defil" /></a>');

par :

document.write('<img style="width: 905px; height: 127px;background:transparent;border:none;" name="dia1defil" />');

Pour modifier l'adresse de destination du lien, corriger : dia1Lien[0] = "http://modifier-les-modeles-de-blogger.blogspot.com/2011/12/derniers-messages.html";

Le lien s'ouvre DANS UNE NOUVELLE FENÊTRE : en fermant la nouvelle page, le visiteur revient sur le blog de départ au lieu de le quitter définitivement !!!

3 commentaires:

Bibulle NailArt a dit…

Bonjour, serait il possible de transformer le code simplement pour que chaque image renvoie vers un lien différent, et qui s'ouvrirait dans la même fenêtre ? Merci et belle soirée !

Bibulle NailArt a dit…

Bonsoir, j'ai bien essayé encore aujourd'hui. Le diaporama s'affiche bien, plusieurs images tournent (6 en tout) de façon aléatoire comme prévu, j'ai rajouté des lignes spécifiques avec les bons numéros dans le code pour tenter d'obtenir une adresse de redirection différente en fonction de l'image. Pourtant toutes les images me renvoient vers le même lien. Je ne sais pas quoi faire et je pense qu'il ne me faudrait pas grand chose pour que cela fonctionne... Auriez vous une idée / astuce, un conseil ? Merci par avance.

Meiser a dit…


Bonjour.

Il suffit d'utiliser le code figurant sur cette page et de ne pas afficher ce qui est superflu :
http://modifier-les-modeles-de-blogger.blogspot.be/2012/02/creer-son-diaporama.html