Problème changement d'image

Fermé

Makishima! Messages postés 3 Date d'inscription lundi 13 mars 2017 Statut Membre Dernière intervention 21 mars 2017 - 13 mars 2017 à 19:37
Makishima! Messages postés 3 Date d'inscription lundi 13 mars 2017 Statut Membre Dernière intervention 21 mars 2017 - 21 mars 2017 à 15:42

Bonjour,

Je suis débutant dans le développement. J'aimerai créé un changement d'image automatique tout les X secondes. Je fais un test sur une seule image pour le moment, le problème c'est que l'image (suite a mon code JS) ne s'affiche pas correctement, malgré qu'on puisse voir à l'emplacement de l'image qu'il y a un changement (suite a un petit saut au niveau de l'image). Si quelqu'un peut m'aider et surtout m'expliquer (car le but pour moi et de comprendre et non qu'on me facilite la tache)

Voici mon code JS :

<script language="JavaScript">

<!--

//PLF-http://www.monjavascript.net/

function objet() {

this.length = objet.arguments.length

for (var i = 0; i < this.length; i++) this[i+1] = objet.arguments[i]

}

var nom = new objet ("img/blue.jpg", "img/cuisine.jpg");

var numero = 1;

function changer() {

document.image.src = "im/"+nom[numero];

numero += 1;

if (numero == nom.length + 1) numero = 1;

setTimeout("changer()", 4000);

}

</script>

Le code HTML :

<div id="partie1" class="page">

<div class="content">

<img class="img-circle" src="img/blue.jpg" alt="blue" name="image">

<img class="img-circle" src="img/red.jpg" alt="red"">

<img class="img-circle" src="img/yellow.png" alt="yellow">

<img class="img-circle" src="img/green.jpg" alt="green">

<img class="img-circle" src="img/marbre.jpg" alt="marbre">

<img class="img-circle" src="img/pierre.jpg" alt="pierre">

<img class="img-circle" src="img/tissu.jpg" alt="tissu">

<img class="img-circle" src="img/bois.jpg" alt="bois">

</div>

</div>

Sachant que l'image blue.jpg doit apparaitre en premier, et c'est l'image nommé cuisine.jpg qui doit prendre sa place(et qui se trouve bien dans le dossier img/).

Merci d'avance.

A voir également:

Problème changement d'image
Changement dns - Guide
Image iso - Guide
Changement d'écriture - Guide
Acronis true image - Télécharger - Sauvegarde
Image iso windows 10 - Guide

3 réponses

Réponse 1 / 3

Nexii Messages postés 338 Date d'inscription jeudi 13 mars 2014 Statut Membre Dernière intervention 14 mars 2017 581
14 mars 2017 à 13:41

Bonjour,

Tout d'abord il semble que tu ai oublié le 'g' de img dans ton code javascript.
Ensuite il y a un souci au niveau du numéro : tu le remet à 1 alors aue le premier index correspond au nombre 0.
Voilà la solution avec quelaue commentaire, n'hésite pas à poser des questions mais l'étude du code devrait t'apporter tes réponses :
Le javascript :

	<script type="text/javascript">
	var myImages = new Array('blue.jpg','cuisine.jpg');
	// Dans un tableau, le premier élément est 0 et non pas 1
	// Mais l'élément 0 étant déja affiché (la src de l'img dans l'HTML), on commence à 1.
	var index = 1; 

	function changer() { 
	// On match l'élément avec l'ID imgSlider et on lui attribue sa source
	  document.getElementById('imgSlider').src = "img/" + myImages[index];
	  // On incrémente l'index
	  index++; 
	  // Si numero atteint 2, on le remet à 0
	  if (index == myImages.length) index = 0; 
	  setTimeout("changer()", 4000); 
	}
	</script>

L'HTML :

<html>
<!-- Exécute la fonction changer() dès aque le DOM est entièrement chargé-->
<body onload="changer()">
	<div>
		<img id="imgSlider" src="img/blue.jpg"/>
	</div>
</body>
</html>

Réponse 2 / 3

Makishima! Messages postés 3 Date d'inscription lundi 13 mars 2017 Statut Membre Dernière intervention 21 mars 2017
21 mars 2017 à 14:25

Merci beaucoup pour ta réponse, effectivement j'aurai du voir l'erreur avec le g d'img.
Et oui par moment je veux fonctionner par "logique". Mais ton code et explications sont clairs.
J'apprécie ta réponse et effectivement, j'apprend au fur et à mesure ;)

Mais j'ai une autre question, j'aimerai faire la même chose avec les autres images (que chacune change avec une autre image) mais j'avoue que je ne vois pas comment faire ?
Dois-je refaire un par un la même méthode ? ou est-ce que je peux englober le tout ?

Merci d'avance

Réponse 3 / 3

Makishima! Messages postés 3 Date d'inscription lundi 13 mars 2017 Statut Membre Dernière intervention 21 mars 2017
21 mars 2017 à 15:42

Sachant, qu'on ne peut mettre plusieurs fois le même ID (id="imgSlider") en question

<script type="text/javascript">
var myImages = new Array('blue.jpg','cuisine.jpg');
                // Dans un tableau, le premier élément est 0 et non pas 1
                // Mais l'élément 0 étant déja affiché (la src de l'img dans l'HTML), on commence à 1.
                var index = 1;

                function changer() {
                // On match l'élément avec l'ID imgSlider et on lui attribue sa source
                  document.getElementById('imgSlider').src = "img/" + myImages[index];
                  // On incrémente l'index
                  index++;
                  // Si numero atteint 2, on le remet à 0
                  if (index == myImages.length) index = 0;
                  setTimeout("changer()", 4000);
                }
        </script>

et le HTML

<body onload="changer()">

<div id="partie1" class="page">
    <div class="content">
        <img  id="imgSlider" class="img-circle" src="img/blue.jpg" alt="bleu">
        <img class="img-circle" src="img/red.jpg" alt="red">
        <img class="img-circle" src="img/yellow.png" alt="yellow">
        <img class="img-circle" src="img/green.jpg" alt="green">
        <img class="img-circle" src="img/marbre.jpg" alt="marbre">
        <img class="img-circle" src="img/pierre.jpg" alt="pierre">
        <img class="img-circle" src="img/tissu.jpg" alt="tissu">
        <img class="img-circle" src="img/bois.jpg" alt="bois">
    </div>
</div>

</body>

Discussions similaires