如何讓jQuery幻燈片暫停onmouseover？

Question

這裏的代碼如下...

var currentImage; 

var currentIndex = -1; 

var interval;function showImage(index){if(index < $('#bigPic img').length){  

var indexImage = $('#bigPic img')[index] 

      if(currentImage){ 

      if(currentImage != indexImage){ 

        $(currentImage).css('z-index',2); 

        clearTimeout(myTimer); 

        $(currentImage).fadeOut(600, function() {myTimer = setTimeout("showNext()", 10000);$(this).css({'display':'none','z-index':1})}); 

       } 
      } 
      $(indexImage).css({'display':'block', 'opacity':1}); 

      currentImage = indexImage; 

      currentIndex = index; 

      $('#thumbs li').removeClass('active'); 

      $($('#thumbs li')[index]).addClass('active'); 

     } 

    } 

    function showNext(){ 
     var len = $('#bigPic img').length; 
     var next = currentIndex < (len-1) ? currentIndex + 1 : 0; 
     showImage(next); 
    } 

    var myTimer; 

    $(document).ready(function() {myTimer = setTimeout("showNext()", 14000);showNext(); //loads first image 

     $('#thumbs li').bind('click',function(e){ 

     var count = $(this).attr('rel'); 

     showImage(parseInt(count)-1); 

     });}); 

Answer 1

我在jsfiddle上放了個簡單的例子。別忘了下次上傳你的風格和html代碼。 （I隨機生成）

http://jsfiddle.net/ppFrE/14/

<div id="bigPic"> 
<img src="http://www.google.com/logos/2012/uganda12-hp.jpg"> 
<img src="http://www.google.com/logos/2012/janusz-korczak-2012-hp.jpg"> 
<img src="http://www.google.com/logos/2012/Brazil_Elections-2012-hp.jpg"> 
</div> 
<ul id="thumbs"> 
    <li><img src="http://www.google.com/logos/2012/uganda12-hp.jpg"></li> 
    <li><img src="http://www.google.com/logos/2012/janusz-korczak-2012-hp.jpg"></li> 
    <li><img src="http://www.google.com/logos/2012/Brazil_Elections-2012-hp.jpg"></li> 
</ul>​ 

下面是一個完整的JavaScript代碼。

var currentImage; 
var currentIndex = -1; 
var interval; 
var myTimer; 
var hover = false; 

function showImage(index) { 
    if (index < $('#bigPic img').length) { 
     var indexImage = $('#bigPic img')[index] 
     if (currentImage) { 
      if (currentImage != indexImage) { 
       $(currentImage).css('z-index', 2); 
       clearTimeout(myTimer); 
       $(currentImage).fadeOut(600, function() { 
        if (!hover) myTimer = setTimeout(showNext, 1000); 
        $(this).css({ 
         'display': 'none', 
         'z-index': 1 
        }) 
       }); 
      } 
     } 
     $(indexImage).css({ 
      'display': 'block', 
      'opacity': 1 
     }); 
     currentImage = indexImage; 
     currentIndex = index; 
     $('#thumbs li').removeClass('active'); 
     $($('#thumbs li')[index]).addClass('active'); 
    } 
} 

function showNext() { 
    var len = $('#bigPic img').length; 
    var next = currentIndex < (len - 1) ? currentIndex + 1 : 0; 
    showImage(next); 
} 

$(document).ready(function() { 
    myTimer = setTimeout(showNext, 1000); 
    showNext(); //loads first image 
    $('#thumbs li').bind('click', function(e) { 
     var count = $(this).attr('rel'); 
     showImage(parseInt(count) - 1); 
    }); 
    $('#bigPic img').hover(function() { 
     hover = true; 
     clearTimeout(myTimer); 
    }, function() { 
     myTimer = setTimeout(showNext, 1000); 
     hover = false; 
    }); 
});​ 

Answer 2

添加懸停在$（文件）。就緒事件時停止鼠標懸停並重新啓動定時器定時當鼠標離開。

$('#thumbs li').hover(function() { 
    clearTimeout(myTimer); 
    }, function() { 
    myTimer = setTimeout("showNext()", 14000); 
    });