Diaporama html

Résolu/Fermé
amandine0108 Messages postés 70 Date d'inscription vendredi 19 août 2011 Statut Membre Dernière intervention 14 mars 2013 - 21 sept. 2011 à 09:27
amandine0108 Messages postés 70 Date d'inscription vendredi 19 août 2011 Statut Membre Dernière intervention 14 mars 2013 - 21 sept. 2011 à 11:01
Bonjour,
J'ai fais une sorte de diaporama, ou les images change toute les 3secondes.
Maintenant je voudrais faire un transition entre les images pour que ça change plus fluidement, connaissez vous des codes de transitions comment les faires et ou les mettre?
Merci

Ps: Voici mon code:

dans la balise html:

<script language="javascript">
var pic=new Array("","1.gif","2.gif","3.gif"); // nom des images
var mis=new Array(3); // tableau des indicateurs 'image tirée'
for(i=1;i<9;i++) {mis[i]=0;} // Initialisation à zéro des indicateurs 'image déjà tirée'
total=0; // pour trouver rapidement la dernière image
for(i=1;i<3;i++) //  boucler sur nombre d'images moins un
{   mis[i]=1+Math.round(Math.random()*3); // tirer aléatoirement un nombre dans mis(i)
   trouve=0; // supposons que l'image ne soit pas encore tirée
   for (j=1;j<i;j++) // voyons si cette image a été tirée
      {if (mis[j]==mis[i]) {trouve=1;} } // si oui
   if (trouve==1) {i=i-1;} // recommencer à tirer
   if (trouve==0) {total=total+mis[i];} // sinon la compter
}
mis[3]=6-total; // 6=3+2+1 donc il manque 6-total
var i=1+Math.round(Math.random()*3);
function change() // la fonction temporisée qui change d'image
{document.pic.src=pic[mis[i]];
i++;if(i>3){i=1;}// 3images
setTimeout("change()", 3000);// Toutes les 3 secondes
}
</script>


Dans la balise Body:

<body onLoad="change()">
<script>
document.write("<img name='pic' src='"+pic[mis[i]]+"' title='"+pic[mis[i]]+"'>");
</script>






2 réponses

gaerebut Messages postés 1017 Date d'inscription mardi 30 octobre 2007 Statut Membre Dernière intervention 22 novembre 2013 171
21 sept. 2011 à 10:18
Bonjour,

Pour cela tu as des bibliothèques toutes prêtent qui ne demandent qu'à être utilisées.
De plus, elles permettent de réaliser des animations très fluides, sans bug et sont généralement facile d'utilisation/modification.

Par ici j'entend Jquery, Mootools ou encore Scriptaculous.

exemple: http://www.liveondesign.com/2009/11/18/15-diaporama-en-jquery/

Pourquoi faire 50 Km à pied quand on te propose une voiture ?

A+
0
amandine0108 Messages postés 70 Date d'inscription vendredi 19 août 2011 Statut Membre Dernière intervention 14 mars 2013
21 sept. 2011 à 11:01
Bah si c'est assez simple a faire, je préférerais le faire seule... c'est tout...
Mais merci
0