SOS Diaporama HTML aléatoire
Magniola Forever
-
avion-f16 Messages postés 19182 Date d'inscription Statut Contributeur Dernière intervention -
avion-f16 Messages postés 19182 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour ,
j' aimerais changer ce code pour que les images apparaissent en odre aléatoire :
<SCRIPT LANGUAGE="javascript">
<!--
var img1=new Image(60,60);img1.src="http://s3.e-monsite.com/2010/08/19/04/Photo-010.jpg";
var img2=new Image(60,60);img2.src="http://s3.e-monsite.com/2010/08/19/01/Photo-616.jpg";
var img3=new Image(60,60);img3.src="http://s3.e-monsite.com/2010/08/19/02/IMG_0835.jpg";
var img4=new Image(60,60);img4.src="http://s3.e-monsite.com/2010/08/23/06/IMG_2229.jpg";
var img5=new Image(60,60);img5.src="http://s3.e-monsite.com/2010/08/23/06/IMG_2250.jpg";
var img6=new Image(60,60);img6.src="http://s3.e-monsite.com/2010/08/23/06/IMG_2252.jpg";
var img7=new Image(60,60);img7.src="http://s3.e-monsite.com/2010/08/29/06/Photo-207.jpg";
var img8=new Image(60,60);img8.src="http://s3.e-monsite.com/2010/08/30/05/Photo-027.jpg";
var img9=new Image(60,60);img9.src="http://s3.e-monsite.com/2010/08/30/05/Photo-528.jpg";
var img10=new Image(60,60);img10.src="http://s3.e-monsite.com/2010/08/30/05/IMG_2286.jpg";
var img11=new Image(60,60);img11.src="http://s3.e-monsite.com/2010/08/30/05/IMG_2362.jpg";
var img12=new Image(60,60);img12.src="http://s3.e-monsite.com/2010/08/30/05/IMG_2422.jpg";
var img13=new Image(60,60);img13.src="http://s3.e-monsite.com/2010/08/30/05/IMG_2315.jpg ";
/* etc ...etc ... rajouter autant de lignes que d'images, (400,300) sont les dimensions des images en pixels, la hauteur puis la largeur, à définir.*/
Total =13; /*Nombres d'images, à définir*/
Temporisation = 1; /*Temporisation du diaporama en secondes, à définir.*/
/* Ne rien éditer sous cette ligne ...!
//////////////////////////////////////////////////////////////////
*/
Temps = Temporisation * 7000;
Flag = false;
//-->
</SCRIPT>
<!-- A coller entre les balises <body> et </body> -->
<CENTER><A HREF="#" OnmouseOver="Flag = true;" OnmouseOut="Flag = false;"><IMG SRC="hilfe.gif" WIDTH="275" HEIGHT="210" BORDER="0" NAME="Vue"></A></CENTER>
<SCRIPT LANGUAGE="javascript">
<!--
var IncremenTation = 1 ;
function Afficher(){
if (!document.images){
alert("Votre navigateur ne supporte pas un SCRIPT inclus dans cette page Web \nVous devriez en télécharger une version plus récente.");
return;
}
if (!Flag) {
document.images.Vue.src=eval("img"+IncremenTation+".src")}
if (IncremenTation < Total)
{
IncremenTation = IncremenTation + 1;
}
else
{
IncremenTation = 1;}
setTimeout("Afficher()",Temps);
}
Afficher();
//-->
</SCRIPT>
Merci
j' aimerais changer ce code pour que les images apparaissent en odre aléatoire :
<SCRIPT LANGUAGE="javascript">
<!--
var img1=new Image(60,60);img1.src="http://s3.e-monsite.com/2010/08/19/04/Photo-010.jpg";
var img2=new Image(60,60);img2.src="http://s3.e-monsite.com/2010/08/19/01/Photo-616.jpg";
var img3=new Image(60,60);img3.src="http://s3.e-monsite.com/2010/08/19/02/IMG_0835.jpg";
var img4=new Image(60,60);img4.src="http://s3.e-monsite.com/2010/08/23/06/IMG_2229.jpg";
var img5=new Image(60,60);img5.src="http://s3.e-monsite.com/2010/08/23/06/IMG_2250.jpg";
var img6=new Image(60,60);img6.src="http://s3.e-monsite.com/2010/08/23/06/IMG_2252.jpg";
var img7=new Image(60,60);img7.src="http://s3.e-monsite.com/2010/08/29/06/Photo-207.jpg";
var img8=new Image(60,60);img8.src="http://s3.e-monsite.com/2010/08/30/05/Photo-027.jpg";
var img9=new Image(60,60);img9.src="http://s3.e-monsite.com/2010/08/30/05/Photo-528.jpg";
var img10=new Image(60,60);img10.src="http://s3.e-monsite.com/2010/08/30/05/IMG_2286.jpg";
var img11=new Image(60,60);img11.src="http://s3.e-monsite.com/2010/08/30/05/IMG_2362.jpg";
var img12=new Image(60,60);img12.src="http://s3.e-monsite.com/2010/08/30/05/IMG_2422.jpg";
var img13=new Image(60,60);img13.src="http://s3.e-monsite.com/2010/08/30/05/IMG_2315.jpg ";
/* etc ...etc ... rajouter autant de lignes que d'images, (400,300) sont les dimensions des images en pixels, la hauteur puis la largeur, à définir.*/
Total =13; /*Nombres d'images, à définir*/
Temporisation = 1; /*Temporisation du diaporama en secondes, à définir.*/
/* Ne rien éditer sous cette ligne ...!
//////////////////////////////////////////////////////////////////
*/
Temps = Temporisation * 7000;
Flag = false;
//-->
</SCRIPT>
<!-- A coller entre les balises <body> et </body> -->
<CENTER><A HREF="#" OnmouseOver="Flag = true;" OnmouseOut="Flag = false;"><IMG SRC="hilfe.gif" WIDTH="275" HEIGHT="210" BORDER="0" NAME="Vue"></A></CENTER>
<SCRIPT LANGUAGE="javascript">
<!--
var IncremenTation = 1 ;
function Afficher(){
if (!document.images){
alert("Votre navigateur ne supporte pas un SCRIPT inclus dans cette page Web \nVous devriez en télécharger une version plus récente.");
return;
}
if (!Flag) {
document.images.Vue.src=eval("img"+IncremenTation+".src")}
if (IncremenTation < Total)
{
IncremenTation = IncremenTation + 1;
}
else
{
IncremenTation = 1;}
setTimeout("Afficher()",Temps);
}
Afficher();
//-->
</SCRIPT>
Merci
1 réponse
-
Salut.
Place ce script dans un fichier externe :function randOrd() { return (Math.round(Math.random())-0.5); } function Gallery(divId) { this.timeout = 1000; this.imagesList = null; this.currentIndex = 0; this.divId = divId; this.imgTag = document.createElement('img'); document.getElementById(this.divId).appendChild(this.imgTag); } Gallery.prototype.setImages = function(imagesList) { this.imagesList = imagesList.sort(randOrd); }; Gallery.prototype.start = function() { var cElem = this; setInterval(function() { cElem.changeImage(); }, cElem.timeout); }; Gallery.prototype.changeImage = function() { var url = this.imagesList[this.currentIndex]; this.currentIndex++; if(this.currentIndex >= this.imagesList.length) { this.currentIndex = 0; } this.imgTag.src = url; };
Là où tu veux voir les images :<div id="image"></div>
Et à la fin de ton body :<script type="text/javascript" src="fichierExterne.js"></script> <script type="text/javascript"> var images = Array( 'image1', 'image2', 'image3' ); galerie = new Gallery('image'); galerie.setImages(images); galerie.start(); </script>
