Javascript - MouseOver上的原型/ Scriptaculous暫停

Question

我使用這個簡單的幻燈片，並想知道如果有人知道如何讓它暫停，當我將鼠標移到它上面，然後再重新開始時，如果我將鼠標移出圖像？

有幻燈片的演示在這裏： http://script.aculo.us/stuff/simplest_slideshow/

這是主代碼：

<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> 

謝謝！

Answer 1

想出答案：

<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>