Modifier un script image defilante !

[Résolu/Fermé]
Signaler
Messages postés
376
Date d'inscription
samedi 24 juillet 2010
Statut
Membre
Dernière intervention
10 mars 2017
-
Messages postés
1143
Date d'inscription
lundi 22 mars 2010
Statut
Membre
Dernière intervention
31 juillet 2019
-
Bonjour,
j'ai trouver ce scipt sur le net :

<script>
var imgs=new Array();
imgs[0]="exemples/photos/1.jpg";
imgs[1]="exemples/photos/2.jpg";
imgs[2]="exemples/photos/3.jpg";
imgs[3]="exemples/photos/4.jpg";
imgs[4]="exemples/photos/5.jpg";
imgs[5]="exemples/photos/6.jpg";
var cpt=0;
function changeimages()
{
document.getElementById("ima").src=imgs[cpt];
cpt++;
if(cpt>=imgs.length) cpt=0;
setTimeout("changeimages()",1500);
}
</script>

j'aimerai le modifier legerement c'est à dire que quand la souris passe sur l'image elle s'arrete et qu'il y ait des fleches en bas pour faire defiler les images (deux fleches)

Voila merci bonne journée

Rémi STEINMANN


4 réponses

Messages postés
1143
Date d'inscription
lundi 22 mars 2010
Statut
Membre
Dernière intervention
31 juillet 2019
110
Voici le code corrigé:
<head>
<script type="text/javascript">
var imgs=new Array(); 
imgs[0]="http://www.mac4ever.com/images/images_actu/42287_62_iphone_4g_concept.jpg"; 
imgs[1]="http://www.blogiphone.fr/wp-content/uploads/2009/02/iphone-4g-3.jpg"; 
imgs[2]="http://demonter.net/wp-content/uploads/2009/11/iphone-4g-concept3.jpg"; 
imgs[3]="exemples/photos/4.jpg"; 
imgs[4]="exemples/photos/5.jpg"; 
imgs[5]="exemples/photos/6.jpg"; 
var cpt=0; 
function changeimages() 
{ 
document.getElementById("ima").src=imgs[cpt];
cpt++; 
if(cpt>=imgs.length) cpt=0; 
setTimeout("changeimages()",1500);
}
function changeimages2() 
{ 
document.getElementById("ima").src=imgs[cpt]; 
cpt--; 
if(cpt<=0) cpt=imgs.length; 
} 
</script>
</head>

<body onLoad="changeimages()">
	<p>
<img src="" onHover="clearTimeout()" id="ima" />
<a href="#" onclick="changeimages2()"><img src="image d'une fleche gauche" /></a>
<a href="#" onclick="changeimages()"><img src="image d'une fleche droite" /></a>
	</p>
</body>


Je t'ai tout mis: tu dois mettre le script dans les balises head, et mettre un événement onLoad à la balise body.
Ton image s'affichera là où est placée la balise img.
Juste en dessous, tu as 2 liens, ce sont les liens des deux flèches. Le lien est une image, mais je ne la possède aps. Tu peux mettre du texte à la place, ou créer ou télcharger deux images de fleche: une vers la droite et une vers la gauche. ;)
Ou bien tu effacaces les img et tu mest du etxte: "image précédente" et "image suivante". ;)
Voilà!
Je pense que tout est là dedans, après, il faut que tu testes. ;)
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 42674 internautes nous ont dit merci ce mois-ci

Messages postés
376
Date d'inscription
samedi 24 juillet 2010
Statut
Membre
Dernière intervention
10 mars 2017
2
vraiment merci y a vraiment des gens supers sur ce forum !
Messages postés
376
Date d'inscription
samedi 24 juillet 2010
Statut
Membre
Dernière intervention
10 mars 2017
2
j'ai un autre gros service à demander as tu team viewer 5 ? ca sreia tpour configurer deux trois trucs sur joomla.....
Messages postés
376
Date d'inscription
samedi 24 juillet 2010
Statut
Membre
Dernière intervention
10 mars 2017
2
tes plus la ?
Messages postés
376
Date d'inscription
samedi 24 juillet 2010
Statut
Membre
Dernière intervention
10 mars 2017
2
quelq'un peut m'aider svp ?
Messages postés
376
Date d'inscription
samedi 24 juillet 2010
Statut
Membre
Dernière intervention
10 mars 2017
2
aide svp
Messages postés
1143
Date d'inscription
lundi 22 mars 2010
Statut
Membre
Dernière intervention
31 juillet 2019
110
Cette fis-ci, tout est correct, et tout est ici... ;)
<script type="text/javascript">
var imgs=new Array(); 
imgs[0]="http://www.mac4ever.com/images/images_actu/42287_62_iphone_4g_concept.jpg"; 
imgs[1]="http://www.blogiphone.fr/wp-content/uploads/2009/02/iphone-4g-3.jpg"; 
imgs[2]="http://demonter.net/wp-content/uploads/2009/11/iphone-4g-concept3.jpg"; 

var cpt=0;
var stop=false;

function changeimages()
{ 
	if (stop) return;
	if(cpt>=imgs.length) cpt=0;

	document.getElementById("ima").src=imgs[cpt];
	cpt++; 

window.setTimeout("changeimages()",3000);
}

function Stop()
{
	stop = true;
}

function Go()
{
	stop = false;
	window.setTimeout("changeimages()",3000);
}

function Change()
{
	if(cpt>=imgs.length) cpt=0;

	document.getElementById("ima").src=imgs[cpt];
	cpt++;
}

function ChangeGauche() 
{
	if(cpt<=0) cpt=imgs.length;

	document.getElementById("ima").src=imgs[cpt];
	cpt--;
}

Go()
</script>
</head>

<body>
	<p>
<a onMouseOver="Stop()" onMouseOut="Go()" ><img src="" height="350" id="ima" /></a> <br />
<a href="#" onclick="Stop();ChangeGauche();">Précédente</a>
<a href="#" onclick="Stop();Change();" >Suivante</a>
	</p>
</body>
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 42674 internautes nous ont dit merci ce mois-ci

Messages postés
1143
Date d'inscription
lundi 22 mars 2010
Statut
Membre
Dernière intervention
31 juillet 2019
110
Plus de onLoad au body!
Le hover marche, et les précédente et suivant aussi... ;)
Messages postés
376
Date d'inscription
samedi 24 juillet 2010
Statut
Membre
Dernière intervention
10 mars 2017
2
merci beaucoup en tt ca mais tu peux repondre a mon message privé stp ?
Messages postés
376
Date d'inscription
samedi 24 juillet 2010
Statut
Membre
Dernière intervention
10 mars 2017
2
???
Messages postés
1143
Date d'inscription
lundi 22 mars 2010
Statut
Membre
Dernière intervention
31 juillet 2019
110
Désolé, j'étais pas là pendant une semaine... ;)
Je réponds de suite à ton MP.
Mais si tu pouvais mettre une bonne note à mon dernier message, et passer ton sukeet en résolu, ce serait sympa pour ceux qui ont le même problème que toi! ;)
Pols12
Messages postés
376
Date d'inscription
samedi 24 juillet 2010
Statut
Membre
Dernière intervention
10 mars 2017
2
aide svp !
Messages postés
1143
Date d'inscription
lundi 22 mars 2010
Statut
Membre
Dernière intervention
31 juillet 2019
110
Salut
e suis extrement nul en JS, mais je pense que:
Il faut rajouter quelque chose comme:
onHover="clearTimeout()"


Pour les flèche, je suppose qu'il faut deux liens avec des onClick
Et pour la fleche, gauche, il faut changer de sens, donc rajouter une fonction qui va en sens inverse, mais sans timer, celle-ci:

[ici, tu mets tout l'autre script, mais tu feremes pas la balise script eyt tu rajoutes ca:]
function changeimages2() 
{ 
document.getElementById("ima").src=imgs[cpt]; 
cpt--; 
if(cpt<=0) cpt=imgs.length; 
} 
</script>


<a href="#" onclick="changeimages2()"><img src="fleche gauche" /></a>
<a href="#" onclick="changeimages()"><img src="fleche droite" /></a>

Et je suis trop content, parce que j'ai jamais appris le JS, et je viens de faire un truc plausible. Après, je sais aps si il marche... =D
Messages postés
376
Date d'inscription
samedi 24 juillet 2010
Statut
Membre
Dernière intervention
10 mars 2017
2
merci bcp mais faut le rajouter ou onHover="clearTimeout()" ? merci
Messages postés
1143
Date d'inscription
lundi 22 mars 2010
Statut
Membre
Dernière intervention
31 juillet 2019
110
Heu... Je pense que ca doit être ici:
Juste après la ligne là:
document.getElementById("ima").src=imgs[cpt];
Tu rajoutes:
document.getElementById("ima").onHover="clearTimeout()";

Mais je ne suis aps très sur... :)

Si ca marche aps, supprime le, et mets le comme attribut de la balise qui a l'ID "ima". ;)
Messages postés
376
Date d'inscription
samedi 24 juillet 2010
Statut
Membre
Dernière intervention
10 mars 2017
2
re le code comma ca est til correct ?

<script>
var imgs=new Array();
imgs[0]="http://www.mac4ever.com/images/images_actu/42287_62_iphone_4g_concept.jpg";
imgs[1]="http://www.blogiphone.fr/wp-content/uploads/2009/02/iphone-4g-3.jpg";
imgs[2]="http://demonter.net/wp-content/uploads/2009/11/iphone-4g-concept3.jpg";
imgs[3]="exemples/photos/4.jpg";
imgs[4]="exemples/photos/5.jpg";
imgs[5]="exemples/photos/6.jpg";
var cpt=0;
function changeimages()
{
document.getElementById("ima").src=imgs[cpt];
document.getElementById("ima").onHover="clearTimeout()"
cpt++;
if(cpt>=imgs.length) cpt=0;
setTimeout("changeimages()",1500);
function changeimages2()
{
document.getElementById("ima").src=imgs[cpt];
cpt--;
if(cpt<=0) cpt=imgs.length;
}
</script>


<a href="#" onclick="changeimages2()"><img src="fleche gauche" /></a>
<a href="#" onclick="changeimages()"><img src="fleche droite" /></a>
}
</script>