Javascript - Prototype/Scriptaculous Pause sur MouseOver

Question

J'utilise ce simple diaporama et je me demandais si quelqu'un savait comment faire une pause quand j'ai déplacé ma souris dessus, puis recommencer si je déplace ma souris de l'image?

Il y a une démo du diaporama ici: http://script.aculo.us/stuff/simplest_slideshow/

Voici le code principal:

<script> 
setInterval(function(){ 
    var imgs = $$('.fadein img'), 
    visible = imgs.findAll(function(img){ return img.visible(); }); 
    if(visible.length>1) visible.last().fade({ duration: 1 }); 
    else imgs.last().appear({ duration: 1, 
     afterFinish: function(){ imgs.slice(0,imgs.length-1).invoke('show'); } }); 
}, 2000); 
</script> 

Merci!

Answer 1

cernées la réponse:

<ul class="fadein" onmouseover="stop_slideshow()" onmouseout="start_slideshow()"> 
     <li><a href="http://google.com"><img src='{{skin url="images/slider.jpg"}}' alt="" /></a></li> 
     <li><a href="http://example.com"><img src='{{skin url="images/slider1.jpg"}}' alt="" /></a></li> 
</ul> 

<script type="text/javascript"> 
var duration = 4000; 
var showNextImage = true; 
     function stop_slideshow() { 
      showNextImage = false; 
     } 
     function start_slideshow() { 
      showNextImage = true; 
     } 
setInterval(function(){ 
    if(!showNextImage){ return; } 
    var imgs = $$('.fadein img'), visible = imgs.findAll(function(img){ return img.visible(); }); 
    if(visible.length > 1) { 
     visible.last().fade({ duration: 1 }); 
    } else { 
     imgs.last().appear({ duration: 1, afterFinish: function(){ imgs.slice(0,imgs.length-1).invoke('show'); } }); 
    } 
}, duration); 
</script>