SOS Diaporama HTML aléatoire
Magniola Forever
-
avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention -
avion-f16 Messages postés 19252 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
A voir également:
- SOS Diaporama HTML aléatoire
- Editeur html - Télécharger - HTML
- Faire un diaporama photo avec musique windows 10 - Guide
- Espace html - Astuces et Solutions
- Mettre plusieurs musique sur diaporama powerpoint ✓ - Forum Powerpoint
- Br html ✓ - Forum Webmastering
1 réponse
Salut.
Place ce script dans un fichier externe :
Là où tu veux voir les images :
Et à la fin de ton body :
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>
