Bonjour,
Le mien est déja construit, je me suis basé sur pas mal de sources que j'ai trouvé,le défilement auto marche bien , sauf que lorsque je clic sur suivant ou sur précédent, un autre setTimeout se déclenche en outre du premier ce qui génére un autre défilement d'image en moins de 5secondes.
voici le code que j'ai mis en place :
<HTML>
<head>
<title> Images défilante </title>
<BODY bgColor=#800000>
<SCRIPT LANGUAGE="JavaScript">
var compteur = 0;
var nbr_image = 3;
var timer=null;
window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false; txtdiv=null; imageholder=null; nIndex=-1; gOpacity=0; readmore=null;links=null;
function so_init() {
alert('so_init');
if(!d.getElementById || !d.createElement){
alert('document');
return;}
imageholder = d.getElementById("imageHolder");
//images
imgs = document.getElementById("imageContainer").getElementsByTagName("img");
autoIncrement(this.arg);
}
function decremente(arg)
{
compteur -- ;
clearTime(timer);
if (compteur == 0)
{
compteur = nbr_image-1;
}
imageholder.src = imgs[compteur].src;
timer = setTimeout("autoIncrement(this.arg)",5000);
}
function autoIncrement(arg){
clearTime(timer);
alert('incremente '+compteur);
if (compteur == (nbr_image))
{
compteur = 0;
}
imageholder.src = imgs[compteur].src;
compteur ++;
timer = setTimeout("autoIncrement(this.arg)",5000);
}
function incremente(arg)
{
clearTime(timer);
alert('incremente '+compteur);
if (compteur == (nbr_image))
{
compteur = 0;
}
imageholder.src = imgs[compteur].src;
compteur ++;
timer = setTimeout("autoIncrement(this.arg)",5000);
//so_init();
}
function clearTime(autoTimer){
alert('autoTimer avant --' +autoTimer);
//clearTimeout(autoTimer);
window.clearTimeout(autoTimer);
//autoTimer=null;
alert('autoTimer aprés --' +autoTimer);
}
</SCRIPT>
</head>
<FORM>
<center><br><br><br>
<table id="tableId" border="3" cellpadding="3" cellspacing="3" bordercolor="#11111111" bgColor="#DBDBDB">
<tr>
<td id="idText">text1</td>
<td align="center">
<img id="imageHolder" src="newlogoSQLI.gif" />
<DIV id="imageContainer" style="DISPLAY: none" align="center">
<span id="NewsRotator1_lblHTML">
<img src="sidi-ali_logo.jpg" border="0">
<input type=hidden value='rico'>
<code title="title1">
<img src="img1.jpg" border="0">
<input type=hidden value='vandervaart'>
<code title="title2">
<img src="sidiharazem1.jpg" border="0">
<input type=hidden value='paul'>
<code title="title3">
<input type=hidden value=''>
<code title="">
</span>
</DIV>
</td>
</tr>
</table>
<br><br>
<input type="button" value="Image précédente" onClick="decremente(this.arg)">
<input type="button" value="Image suivante" onClick="incremente(this.arg)">
</center>
</FORM>
</BODY>
</HTML>