JQuery подкачки галерея изображений на mouseover

Question

Я создал это DEMO для моего вопроса.

В моей демонстрации вы можете видеть, когда вы наводите указатель мыши на миниатюрное изображение с помощью мыши, большая картинка меняется. Чего я хочу? Я хочу изменить изображения автоматически через несколько секунд.

Что мне нужно для этого? Кто-нибудь может мне помочь?

$(document).ready(function() { 

    $("#magazin_sldwr li img").hover(function(){ 
     $('#mainm-img').attr('src',$(this).attr('src').replace('thumb/', '')); 
    }); 
    var imgSwap = []; 
    $("#magazin_sldwr li img").each(function(){ 
     imgUrl = this.src.replace('thumb/', ''); 
     imgSwap.push(imgUrl); 
    }); 
    $(imgSwap).preload(); 
}); 
$.fn.preload = function() { 
    this.each(function(){ 
     $('<img/>')[0].src = this; 
    }); 
} 

Answer 1

Это начало: demo

Идея заключается в том, чтобы использовать .active класс на родителе li текущего изображения, а затем вызвать mouseenter событие каждый 2 секунды:

function autoChangeImage() { 
    setTimeout(function(){ 
     $("#magazin_sldwr li.active") 
      .removeClass('active') 
      .next('li') 
      .addClass('active') 
      .children('img') 
      .trigger('mouseenter'); 
     autoChangeImage(); 
    }, 2000); 
} 

конечно, вы, вероятно, захотите вернуться к первому эмпирического после достижения последнего, и clearTimeout при наведении пальца «вручную»: demo

Answer 2

использование setInterval()

setInterval(function() { 
    //change image 
}, 2000); 

Где 2000 это количество милисекунд. Для о лы одного изменения вы можете использовать setTimeout()