jQuery: Every 5 seconds, automatically click on next image in a list?

Question

I have a given list of images, presented as thumbnails:

    
&         


        

Answer 1

You can go with the plain JQuery way, if you like. Here's my try

var intervalId;
$(function(){


function cycleImage(){

    var onLastLi = $("#thumbs li:last").hasClass("current");       
    var currentImage = $("#thumbs li.current img");
    var targetImage = $('div.feature-photo img');             
    $(targetImage).hide().attr('src', $(currentImage).attr('src')).fadeIn();

    var currentLi = $("#thumbs li.current");
    currentLi.removeClass("current");

    if(onLastLi){
        $("#thumbs li:first").addClass("current");
    }else{        
        currentLi.next().addClass("current");
    }

};

 intervalID = setInterval(cycleImage, 5000);



})

And you can find it in action here