11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Afficher les divs une par une pendant 15 secondes

Bonjour, actuellement je suis en train de faire un bandeau avec les news que je vais intégrer a un site développé en flash qui va bientôt disparaitre. Toute la partie visuelle est faite est il me reste juste a faire la partie JavaScript. Alors j'ai 15 div qui récupère les news depuis un fichier xml et je voulais afficher une div toute le 15 secondes puis la faire disparaitre et afficher une autre aussi pendant 15 secondes et ca pour les 15 divs, en boucle, ca veut dire qu'après la div 15 ca repart sur la première.
J'ai cherché toute la journée des tutos, des exemples de code mais sans succès.

Peut-être que quelqu'un connait et pourrai m'aider. Merci d'avance !!!
Modérateur
Bonsoir,

Qu'est ce que tu n'arrives pas à faire ? l'animation vu/pas vu ou récupérer les contenus XML ?

Cdt
Hello,

je te propose une manière de procéder:


<!DOCTYPE html>
<html>
 
	<head>
   
		<script>
		
			// on déclare la première div à afficher
			let activeDiv = 0;
			
			// au chargement complet du dom
			document.addEventListener('DOMContentLoaded', function () {

				// la liste des divs
				const divList = document.getElementsByTagName('div');
				// on affiche la première div
				divList[activeDiv].style.setProperty('display','block');
				// à chaque 15s on va appeler la fonction
				setInterval(displayDivs, 15000, divList);

			});
			
			const displayDivs = function (elements) {
			
				// on incrémente de 1
				activeDiv++;
				// si supérieur au nombre de divs on repasse à 0
				if ( activeDiv == elements.length ) { activeDiv = 0; }
				// on désactive toutes les divs
				for ( let i = 0; i < elements.length; i++ ) { elements[i].style.setProperty('display','none'); }
				// et bien entendu on affiche la div en cours
				elements[activeDiv].style.setProperty('display','block');

			};

		</script>
		
		<style>
	
			div { display: none; }
			
		</style>
     
	</head>

	<body>

		<div>ALERTE IL FAIT SUPER FROID</div>
		<div>JOYEUX NOEL</div>
		<div>VIVEMENT VENDREDI</div>
		<div>C'EST L'HEURE DU CAFÉ</div>
		<div>NE PAS OUBLIER LE PAIN</div>

	</body>
   
</html>
gcyrillus a écrit :
Bonsoir,

Qu'est ce que tu n'arrives pas à faire ? l'animation vu/pas vu ou récupérer les contenus XML ?

Cdt

J'arrive a récupérer le contenu depuis les fichiers xml, mais apres je veux afficher une div pendant 15 secondes puis la cacher et afficher une autre pendant 15 s aussi.
stryk merci pour ton script je viens de le tester, mais je rencontre quelques soucis.
Quand j'actualise ma page la première div est bien affichée et reste pendant 15 s comme je voulais, mais c'est après que ca fonctionne plus, j'ai pas de contenu sur les div qui suivent en plus il y a un interval de quelques secondes entre chaque div ou il y a rien affiché genre une page blanche.
J'ai mis div { display: none; } pour chaque div et j'ai fais attention pour ne rien changer dans le script quand je l'ai intégré.
Y'a pas une possibilité de prendre les div par leurs ID ? et dite moi peut-être que j'ai oublier quelque choses

Merci
Hello,

Oui il y'a conflit avec les DIV qui ne sont pas concernés par l'affichage temporisé.
Je te propose de travailler avec une CLASS, comme ceci:


<!DOCTYPE html>
<html>
 
	<head>
   
		<script>
		
			// on déclare la première div à afficher
			let activeDiv = 0;
			
			// au chargement complet du dom
			document.addEventListener('DOMContentLoaded', function () {

				// la liste des divs
				const divList = document.getElementsByClassName('toDisplay');
				// on affiche la première div
				divList[activeDiv].style.setProperty('display','block');
				// à chaque 15s on va appeler la fonction
				setInterval(displayDivs, 1500, divList);

			});
			
			const displayDivs = function (elements) {
			
				// on incrémente de 1
				activeDiv++;
				// si supérieur au nombre de divs on repasse à 0
				if ( activeDiv == elements.length ) { activeDiv = 0; }
				// on désactive toutes les divs
				for ( let i = 0; i < elements.length; i++ ) { elements[i].style.setProperty('display','none'); }
				// et bien entendu on affiche la div en cours
				elements[activeDiv].style.setProperty('display','block');

			};

		</script>
		
		<style>
	
			.toDisplay { display: none; }
			
		</style>
     
	</head>

	<body>

		<div class="toDisplay">ALERTE IL FAIT SUPER FROID</div>
		<div class="toDisplay">JOYEUX NOEL</div>
		<div class="toDisplay">VIVEMENT VENDREDI</div>
		<div class="toDisplay">C'EST L'HEURE DU CAFÉ</div>
		<div class="toDisplay">NE PAS OUBLIER LE PAIN</div>
		
		<div>CETTE DIV N'EST PAS CONCERNÉE</div>

	</body>
   
</html>
Meilleure solution
Sujet clos
Aller à