Question

I’ve read “jquery fundamentals” which appears a popular recommendation for starting o jquery. I’m also an amateur but reasonably comfortable user of html and css. I have gone to the jquery page and was expecting I’d find a plug in for a changing image but the site says that this section is being redeveloped.

Where should I start? What methods should I consider? As a complete newbie to JS and jquery should I attempt to do this myself or adjust somebody else’s work initially?

I’m building a simple website where the home page has a main image that needs to change every few seconds to show a total of about 4 or 5 images.

Someone please point me in the right direction?

Answer 1

If you don’t want to use a plugin, but want to mess around with some code to actually learn something, than this might help you. Just substitute '.home-page-images' with your image selector and see the magic happen – the images will change every 5 seconds and will fadeIn in 1 second:

$(function(){

var elements = $('.home-page-images');
var counter = 0;

if( elements.length > 1 ){
    elements.hide();
    elements.first().show();
    setInterval(function() {
        elements.eq(counter).fadeOut('slow');
         counter++;
         if (counter == elements.length) {
             counter = 0;
         }
        elements.eq(counter).fadeIn(1000);
    }, 5000);
}
})

Mind you, for this to work you will have to output all of your images, position them over one another using CSS. Then JS will take care of the rest.

Also, this will help you to understand how setInterval works:
http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/