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>