jQuery ротатор, пауза при наведении курсора на div и маленькая миниатюра навигации

Question

Ниже приведен код jsfiddle.net, который я хочу обновить новыми функциями:

http://jsfiddle.net/weigruf/mKj8p/

Я хочу добавить паузу в последовательности при наведении курсора на .rotator..rotator-child div и маленькая миниатюра навигации, которая покажет небольшую версию того же изображения, и вы можете перемещаться по ним.

Кроме того, навигация по миниатюрам также должна иметь эффект паузы.

Заранее спасибо.(:

Редактировать 1:

Я объединил коды и обновил код с помощью .mouseenter, и теперь последовательность приостановлена, однако я хочу возобновить последовательность на .mouseleave и снова сделать ееесли курсор находится на div.

Пожалуйста, посмотрите:

http://jsfiddle.net/weigruf/mKj8p/

Answer 1

Я никоим образом не являюсь экспертом jQuery / JS, и это не рабочий пример, но это может помочь вам указать верное направление.

Вместо setTimeout я использовал setInterval.При наведении курсора очистите интервал, чтобы он не срабатывал снова.При отпускании мыши подождите 6 секунд и запустите функцию doRotate (), которая снова запустит таймер и загрузит новое объявление.

function doRotate() {
    next();
    theInterval = setInterval(doRotate, 6000);
}

$('#myAdElement').mouseenter(function() {
   clearInterval(theInterval)
})

$('#myAdElement').mouseleave(function() {
   setTimeout(function() {
       doRotate();
   }, 6000);
})