Javascript - прототип / сценарий паузы на MouseOver - PullRequest
0 голосов
/ 04 января 2010

Я использую это простое слайд-шоу и спрашиваю себя, знает ли кто-нибудь, как заставить его остановиться, когда я наведу на него мышь, а затем начать снова, если я уберу мышь с картинки?

Демонстрация слайд-шоу здесь: 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>

Спасибо!

1 Ответ

0 голосов
/ 15 января 2010

разобрался с ответом:

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