Trichy高亮旋轉jQuery - 定時器和選擇器

Question

所以這是一個有趣的項目。我有4個縮略圖顯示在頁面上。每隔幾秒鐘，應突出顯示這些縮略圖中的一個。 （高亮表示在正常的拇指上可以看到帶有灰背景的新圖像）鼠標懸停後，我需要暫停計時器。我知道我很接近！在頁面加載時，第一個圖像會自動高亮顯示，但其他圖像永遠不會獲得自動高亮顯示。這裏是JS：

$(function() { // Shorthand for $(document).ready(function() { 
     function nextImage() { 
     var next = $('div.activeThumb.currentHighlight'). 
       removeClass('currentHighlight'). // Unhighlight old one 
       next('div.activeThumb'); // Find next one 
     if (next.length == 0) { // Cycle back to the first 
       next = $('div.activeThumb:first');     
     } 
     next.addClass('currentHighlight'); // Highlight new one      
    } 
    var timer = null; 
    $('a.aThumb').hover(function() { 
     clearInterval(timer); // Stop on hover 
     $('div.activeThumb.currentHighlight'). 
       removeClass('currentHighlight');//Remove whatever the current auto    highlight is. :) 
    }, function() { 
     setInterval(nextImage, 2000); //Restart on exit 
    }); 
    nextImage(); // Highlight first image 
    setInterval(nextImage, 2000); // Start cycle 
    }); 

如果你願意，你可以用html和css查看測試頁。這是一個有點奇怪的設置。 http://cartercallahan.com/TestSite/javaSlider2/

Answer 1

下一個方法不符合您的預期。我有一個基於索引的方法，應該可以正常工作。 jsfiddle示例：http://jsfiddle.net/lucuma/pm6fA/5/

您可以設置索引並在移動縮略圖數組時添加該索引。

var activeClass = 'currentHighlight'; 
var timer; 
var $thumbs; 
var index = 0; 

function nextImage() { 
     $thumbs.eq(index).removeClass(activeClass); 
     index = (index+1) % $thumbs.length; 
     $thumbs.eq(index).addClass(activeClass);  
    } 

$(function() { 

    $('a.aThumb').hover(function() { 
     clearInterval(timer); // Stop on hover 
     $('div.activeThumb.currentHighlight'). 
      removeClass('currentHighlight'); 
    }, function() { 
     timer = setInterval("nextImage()", 2000); //Restart on exit 
    }); 


    $thumbs = $('div.activeThumb'); 
    $thumbs.eq(index).addClass('currentHighlight'); 
    timer= setInterval("nextImage()", 2000); // Start cycle 

});​