Javascript - Prototype/Scriptaculous在MouseOver上的暂停

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>