Titre: Diaporama javascript
Posté par: lulu44 le le 20-08-2012 a 11:33:35
Bonjour à tous, voila j'ai programmé un diaporama en JavaScript qui fonctionne mais je cherche à le faire stopper quand l'utilisateur passe sa souris dessus.
Mon problème est qu'entre chaque diapo il y a un passage au noir régis grâce à un setTimeOut. A la fin du temps la div passe au noir et au nouvel intervalle elle reviens comme avant. Avec un clearInterval, cela stop le défilement des images mais n'enlève pas le time out ce qui fait que ma div reste noire: ma div:
<div id="photo_presentation"></div>
mon script:
function Shadow_diaporama(width, height, of, to, id, gradient)
{
var element = document.getElementById(id);
if (of < to && of >=0 && of <= 10){
var timer = setInterval(function(){
var opacity_of = of/10;
element.style.boxShadow = "inset "+width+"px "+height+"px "+gradient+"px rgba(0, 0, 0, "+opacity_of+")";
element.style.MozBoxShadow = "inset "+width+"px "+height+"px "+gradient+"px rgba(0, 0, 0, "+opacity_of+")";
element.style.WebkitBoxShadow = "inset "+width+"px "+height+"px "+gradient+"px rgba(0, 0, 0, "+opacity_of+")";
if(to <= of){clearInterval(timer)}
else{
of = of + 0.5;
}
},50);
}
else if (to < of && to >=0 && to <= 10){
var timer = setInterval(function(){
opacity_of = of/10;
element.style.boxShadow = "inset "+width+"px "+height+"px "+gradient+"px rgba(0, 0, 0, "+opacity_of+")";
element.style.MozBoxShadow = "inset "+width+"px "+height+"px "+gradient+"px rgba(0, 0, 0, "+opacity_of+")";
element.style.WebkitBoxShadow = "inset "+width+"px "+height+"px "+gradient+"px rgba(0, 0, 0, "+opacity_of+")";
if(to >= of){clearInterval(timer)}
else{
of=of - 0.5;
}
}, 50);
}
}
function Diaporama(image_one, image_two, image_three, image_four, image_five, image_six, image_seven){
var element = document.getElementById('photo_presentation');
element.style.backgroundImage = 'url('+image_one+')';
setTimeout("Shadow_diaporama(900, 240, 0, 10, 'photo_presentation', 0)", 4000);
var i = 0;
var timer_diaporama = setInterval(function(){
Shadow_diaporama(900, 240, 10, 0, 'photo_presentation', 0);
if(i == 0){
element.style.backgroundImage = 'url('+image_two+')';
i++;
}
else if(i == 1){
element.style.backgroundImage = 'url('+image_three+')';
i++;
}
else if(i == 2){
element.style.backgroundImage = 'url('+image_four+')';
i++;
}
else if(i == 3){
element.style.backgroundImage = 'url('+image_five+')';
i++;
}
else if(i == 4){
element.style.backgroundImage = 'url('+image_six+')';
i++;
}
else if(i == 5){
element.style.backgroundImage = 'url('+image_seven+')';
i++;
}
else if(i == 6){
element.style.backgroundImage = 'url('+image_one+')';
i = 0;
}
setTimeout("Shadow_diaporama(900, 240, 0, 10, 'photo_presentation', 0)", 4000);
}, 5000);
} |
Titre: Re:Diaporama javascript
Posté par: lulu44 le le 20-08-2012 a 11:35:51
Ma question est que puis-je faire ? est-il possible de stoper l'action d'un setTimeOut ? ou est-il possible de faire le meme rendu sans un setTimeOut ?
|
Titre: Re:Diaporama javascript
Posté par: lulu44 le le 23-08-2012 a 18:56:39
[résolu]
J'ai décalé juste l'image et non le dégradé |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|