Tricky Highlight Rotation JQuery - таймер и селектор

Question

Так что это был забавный проект. У меня есть 4 уменьшенных изображения, отображаемых на странице. Каждые пару секунд один из этих миниатюр должен быть выделен. (Изюминка означает, что новое изображение с greybackground становится видимым над обычным большим пальцем). При наведении курсора мыши мне нужно приостановить таймер. Я знаю, что я рядом! При загрузке страницы первое изображение получает автоматическое выделение, но на других изображениях никогда не появляется автоматическое выделение. Вот 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 

});​