2015-12-03 32 views
0

大家如何在此代碼中暫停幻燈片?

我有這樣的代碼

<script type="text/javascript" > 
     $(function(){ 
      var time = 10000;//milliseconds 
      var index = 0; 
      var container = $("#containerr"); 
      var childrenCount = $(".slide").length; 
      function slideToNext() { 

       index = (index + 1) % childrenCount; 
       console.log(index); 
       container.css({ 
        marginLeft: -1 * index * 100 + "%" 
       }) 
      } 

      var pt = window.setInterval(function() { 
       slideToNext(); 
      }, time) 
     }) 
    </script> 

我想使它暫停時,鼠標和鼠標時不重新開始播放。

我該如何做到這一點。

謝謝

回答

3

你需要創建一個設置爲true一個變量,當你徘徊:

var isPaused = false; 
$("#containerr").on('hover', 
    function() { isPaused = true; }, 
    function() { isPaused = false; } 
); 

var pt = window.setInterval(function() { 
    if (!isPaused) 
     slideToNext(); 
}, time)