Défilé d'images

Code non fonctionnel

<< 1 2

Sujet résolu

3 novembre 2010 à 10:48:56

EDIT : J'ai vu une erreur, screenArray[screenActual], c'est screenArray[i]
Seulement ça ne fonctionne toujours pas.

1) initialisation de la boucle, i=0
2) i vaut screenActual, donc on définit la propriété display de l'élément DOM du tableau screenArray à l'index i à "" (on l'affiche/le laisse affiché)
3) i < 3 donc on continue la boucle
4) i vaut maintenant 1
5) i ne vaut pas screenActual, donc on définit la propriété display de l'élément DOM du tableau screenArray à l'index i à "none" (on le cache/le laisse caché)
6) i < 3 donc on continue la boucle
7) i vaut maintenant 2
8) i ne vaut pas screenActual, donc on définit la propriété display de l'élément DOM du tableau screenArray à l'index i à "none" (on le cache/le laisse caché)
9) i < 3 donc on continue la boucle
10) i vaut maintenant 3
11) i ne vaut pas screenActual, donc on définit la propriété display de l'élément DOM du tableau screenArray à l'index i à "none" (on le cache/le laisse caché)
12) i n'est pas < que 3 donc on sort de la boucle

Au prochain appel de la fonction récursive screenActual aura été incrémenta, donc screenActual vaudra 1.

Nek'

4 novembre 2010 à 17:35:45

screenArray[screenActual]
2- ... à l'index i ...
wtf ?

Ne dit pas des trucs qui ne collent pas à ton code (ou alors tu n'as rien compris à ce que tu fais ?).

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

l0lmanPH

4 novembre 2010 à 17:43:50

L'objet DOM à screenArray[i], je ne sais pas l'exprimer mieux.

Nek'

4 novembre 2010 à 17:49:56

screenArray[i], si c'est simple de l'exprimer mieux, il suffit de dire à quel node ça correspond, et la première fois c'est à celle-ci:
<li><img src="http://img41.xooimage.com/files/2/9/4/screen1-1ecd98c.png" alt="" /><br /><span>Barre de chargement</span></li>

Mais là n'est pas la question, le fait est qu'on ne parle pas de screenArray[i] justement, relie ton code >.>

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

l0lmanPH

4 novembre 2010 à 17:52:47

J'ai utilisé une fonction anonyme à la place de initFunction et ça marche mieux.
Parce-que maintenant j'ai bien un diaporama mais en double !

Peut-être qu'il faudrait que j'utilise des closures...

Je l'avais corrigé !

Citation : l0lmanPH

EDIT : J'ai vu une erreur, screenArray[screenActual], c'est screenArray[i]
Seulement ça ne fonctionne toujours pas.

[...]

</span>

EDIT : le nouveau code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

        <head>
                <script>
                        function startAnim(ms, screenActual, screenArray) {
                                var screensNbr = screenArray.length;
                                if (screenActual == screensNbr) {
                                        screenActual = 0;
                                }

                                for (i = 0; i < screensNbr; i++) {
                                        screenArray[i].style.display = (i == screenActual) ? "none" : "";
                                }
                                
                                screenActual++;
                                setTimeout(function () { startAnim(ms, screenActual, screenArray); }, ms); // Le function() est moche mais compatible avec tous les navigos
                        }
                        
                        window.onload = function() {
                                var screensList = document.getElementById("slideShow").getElementsByTagName("li");
                                startAnim(3000, 0, screensList);
                        }
                </script>
                
                <style type="text/css">
                        #slideShow {
                                list-style-type: none;
                        }
                </style>
        </head>

        <body>
                <ul id="slideShow">
                        <li><img src="http://img41.xooimage.com/files/2/9/4/screen1-1ecd98c.png" alt="" /><br /><span>Barre de chargement</span></li>
                        <li><img src="http://img41.xooimage.com/files/2/4/1/screen2-1ecd9b8.png" alt="" /><br /><span>Ecran Titre du jeu</span></li>
                        <li><img src="http://img28.xooimage.com/files/2/4/0/screen3-1ecdc18.png" alt="" /><br /><span>Premier niveau du jeu</span></li>
                </ul>
        </body>

</html>

Nek'

4 novembre 2010 à 17:59:43

Et t'as testé là ? Parce que chez moi ça fonctionne.
Pas comme tu veux, certes, mais ça fonctionne.

Et quand tu vois ce qui ne fonctionne pas, le bug est évident. D'ailleurs c'est sur la partie que tu n'as pas décrit qu'il y a un bug (comme de par hasard).

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

l0lmanPH

4 novembre 2010 à 18:03:22

Ah je ne vois pas où...

Est-ce à cause du paramètre ?
Peut-être que je fais une copie des li... xD

Ou sinon la boucle for ne cache pas tous les items de la liste...

Nek'

4 novembre 2010 à 18:24:30

screenArray[i].style.display = (i == screenActual) ? "none" : "";

Dit moi exactement ce que fait cette instruction avec i = 0, screenActual = 0.

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

l0lmanPH

4 novembre 2010 à 18:26:39

Dans ce cas screenArray[i].style.display = "none"

Bien joué.

Il faut inverser les "none" et "".

Voici le code final et fonctionnel !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

	<head>
		<script>
			function diapo(ms, screenActual, screenArray) {
				var screensNbr = screenArray.length;
				if (screenActual == screensNbr) {
					screenActual = 0;
				}

				for (i = 0; i < screensNbr; i++) {
					screenArray[i].style.display = (i == screenActual) ? "" : "none"; // afficher l'élément du diapo actuel et cacher les autres items de la liste
				}
				
				setTimeout(function () { diapo(ms, ++screenActual, screenArray); }, ms);
			}
			
			window.onload = function () {
				diapo(3000, 0, document.getElementById("slideShow").getElementsByTagName("li"));
			}
		</script>
		
		<style type="text/css">
			#slideShow {
				list-style-type: none;
			}
			#slideShow img {
				width: 400px;
				height: 300px;
			}
			#slideShow span {
				font-weight: bold;
				font-family: sans-serif;
				font-size: 30px;
				margin-left: auto;
				margin-right: auto;
			}
		</style>
	</head>

	<body>
		<ul id="slideShow">
			<li><img src="http://img41.xooimage.com/files/2/9/4/screen1-1ecd98c.png" alt="" /><br /><span>Barre de chargement</span></li>
			<li><img src="http://img41.xooimage.com/files/2/4/1/screen2-1ecd9b8.png" alt="" /><br /><span>Ecran Titre du jeu</span></li>
			<li><img src="http://img28.xooimage.com/files/2/4/0/screen3-1ecdc18.png" alt="" /><br /><span>Premier niveau du jeu</span></li>
		</ul>
	</body>

</html>

Merci pour ton aide et ta patience.

<< 1 2