Défilement aleatoire de 5 images

Loic -  
 bob -
Bonjour,





Bonjour,

J'aimerai que dans mon site, au niveau de ma banniére composées de 5 image defilent de maniére aléatoire, toutes les 5secondes

alors je suis partis avec ce bout de code mais j'ai pas réussit a l'adapter:


<?php

$repertoire = "image/";
$dir = opendir($repertoire);
$nbIm = 0; //Compteur d'image permettant de les ajouter dans le tableau JS
while($im = readdir($dir)) {
if($im != ".." && $im != ".") {
// Ajout de l'image dans le tableau JS (Bien faire un echo !)
echo "Pix[$nbIm] = '" . $repertoire.$im . "';";
$nbIm++;
}
}
//Toujours tenter de fermer un dossier après une ouverture (même si l'ouverture a manqué)
closedir($dir);
?>
var howMany = Pix.length;
timeDelay *= 1000;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];

function startPix() {
setInterval("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPix"].src = PicCurrent.src;

}
// End -->
</script>



et ensuite j'insere ca a l'endroit voulut

<img src="image/image1.jpg" name="ChangingPix" height="120" width="120"/>

J'ai plusieurs question;

Est'il possible d'empecher que img src="image/image1.jpg soit la premiére image affiché? que ce soit réelement de l'aléatoire?

De plus en réalité je vais piocher mes photos dans deux dossier differents, et j'aimerai que quand ca vient d'un dossier les photos possedent une url et de l'autre dossier une autre url



1 réponse

Réponse 1 / 1
Quo
 
Essayer de reprendre une bibli déjà faites prends plus de temps que de refaire à zéro.


Cette ligne la si jquery n'est pas déjà inséré ou si tu sais pas ce que c'est jquery :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

La ou tu veux mettre ta bannière
<img src="" id="banniere" />

<script>
$(document).ready(function(){
boucle();
});
function boucle(){
$('#banniere').attr('src', 'image/image'+Math.floor((Math.random()*5)+1)+'.jpg');
setTimeout(function(){boucle()}, 5000);
}
</script>
Voila en cinq minutes
1
Quo
 
Autant pour moi j'avais pas vu ta question sur les deux répertoires, remplace

$('#banniere').attr('src', 'image/image'+Math.floor((Math.random()*5)+1)+'.jpg');

par

if(Math.floor((Math.random()*2)+1)==1){
var repertoire = 'image/image';
var nbimage = 5
}else{
var repertoire = 'image_bis/image';
var nbimage = 9
}
$('#banniere').attr('src', repertoire+Math.floor((Math.random()*nbimage)+1)+'.jpg');

Avec nombre d'image dans chaque répertorie paramétrable
0
Loic
 
Merci j'essaie ca et je vous tiens au courant!
0
Loic
 
Bonjour,
Merci j'ai fait ce que tu m'as dis mais cela ne marche pas:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>

<div class="corpshaut">
<img src="" id="banniere" />
<script>
$(document).ready(function(){
boucle();
});
function boucle(){
if(Math.floor((Math.random()*2)+1)==1){
var repertoire = 'image/';
var nbimage = 5
}else{
var repertoire = 'image2/';
var nbimage = 5
}
$('#banniere').attr('src', repertoire+Math.floor((Math.random()*nbimage)+1)+'.jpg');

setTimeout(function(){boucle()}, 5000);
}
</script>

</div><!--corps-->

</body>

les deux dossiers existent et sont a la bonne place,mais ca me marque tout simplement qu'il n'y a pas d'image.
Deplus j'aimerai que cette image soit cliquacle et que de ce fait selon son dossier de provenance l'url de destination ne soit pas la meme ,
Merci a toi
0
Loic
 
autre question, il n'y a que les .jpg qui fonctionnent?
0
Quo
 
Ca ne fonctionne que pour les images nommées "X.jpg" oui. Je ne peux pas faire mieux en cinq minutes, tu as juste besoin de renommer tes images (En plus ca facilitera le classement dans ton dossier) si tu as besoin de faire par exemple ban1.jpg rajoute "ban" après le "/" dans le chemin.

Pour le lien remplace :
if(Math.floor((Math.random()*2)+1)==1){
var repertoire = 'image/';
var nbimage = 5
}else{
var repertoire = 'image2/';
var nbimage = 5
}
$('#banniere').attr('src', repertoire+Math.floor((Math.random()*nbimage)+1)+'.jpg');

Par
if(Math.floor((Math.random()*2)+1)==1){
var repertoire = 'image/';
var nbimage = 5
var lien = 'www.lien.fr"
}else{
var repertoire = 'image2/';
var nbimage = 5
var lien = 'www.lien2.fr"
}
$('#lien_banniere').('href, lien);
$('#banniere').attr('src', repertoire+Math.floor((Math.random()*nbimage)+1)+'.jpg');

et ta bannière par
<a href="" id="lien_banniere"><img src="" id="banniere" /></a>

Si ma solution ou ton plugin ne te conviennent toujours pas essayer d'en chercher un nouveau.
0

Discussions similaires

Voxbone ? qui est-ce ?
fanfan54 -
ntrece13 -

159 réponses
Excel 365 + Windows 10 Arrêt défilement flèches
VALBRISE -
VALBRISE -

5 réponses
PIX
plart -
jordane45 -

1 réponse
Excel : les flèches déplacent le document
Hypergonar -
Hypergonar -

2 réponses
Touche arrêt défil sur clavier
munette -
inconnusoldat -

48 réponses