Afficher des div différent tout les X seconde

Eléphant du PHP | 440 Messages

16 nov. 2013, 20:04

Bonsoir à tous,

Je dispose d'une page web (index.php) avec à l’intérieur 4 DIV (rdz,affichage,affichage_p,autre) masquée.

Les 4 div sont alimentés avec de l'ajax, cela est fonctionne j'arrive à afficher le résultat.

Par contre je voudrais avoir des conseils /exemple pour afficher un seul DIV à la fois et que cela s'alterne tout les XX secondes.

Le schéma de fonctionnant serait:

- On lance la page web dans le navigateur (tout les div seront cachées)
- XX secondes plus tard on affiche le premier DIV (celui-ci fait un appel ajax pour alimenté)
- puis XX seconde plus tard deuxieme DIV (celui-ci fait un appel ajax pour alimenté)
- puis XX seconde plus tard puis le troisieme etc et le 4ème .

une fois le 4eme DIV affiché on repasse au premier DIV.

Comment je pourrais réaliser cela en javascript. Est-ce réalisable?

merci d'avance pour vos explications

guigui69

Mammouth du PHP | 1511 Messages

17 nov. 2013, 11:15

J'avais déjà planché la dessus il y a quelques temps, jamais testé par contre.
[javascript]var divs = ['div1', 'div2', 'div3', 'div4'];
var currentDiv = null;

var afficherDiv = function(div) {
//ta logique d'affichage des divs
}

var alternerDiv = function() {
//la div courante est elle dans la liste ? (cas de l'initialisation ou currentDiv = null)
if(typeof divs.indexOf(currentDiv) > -1) {
// Si la div courante est la dernière du tableau
if(divs.indexOf(currentDiv)+1 == divs.length) {
//On affiche la première div de la liste
afficherDiv(divs[0]);
//On change la div courante
currentDiv = divs[0];
}
else {
afficherDiv(divs[divs.indexOf(currentDiv+1)]);
currentDiv = divs[divs.indexOf(currentDiv+1)];
}
}
else {
//On affiche la première div de la liste
afficherDiv(divs[0]);
//On change la div courante
currentDiv = divs[0];
}

//Prochain changement de div dans 2s
setTimeout(2000, alternerDiv);
}

//Premier changement de div
setTimeout(2000, alternerDiv);[/javascript]