jQueryReplacing images at time intervals

Question

I\'m trying to add christmas lights to my logo. I was going to do this in flash but I\'m trying to move away from flash so I decided to try it with jQuery.

A quick g

Answer 1

Ah, already answered.

Try this one

You've used show() function which adds display:block style to the element. So, after one run all of the images were displaying at once and the last one was on top of the others so that one was displayed.

Answer 2

Try this;

function swapImages() {
    var $current = $('#myGallery img:visible');
    var $next = $current.next();
    if($next.length === 0) {
        $next = $('#myGallery img:first');
    }
    $current.hide();
    $next.show();
}

$(document).ready(function() {
    // Run our swapImages() function every 0.5 secs
    setInterval(swapImages, 500);
});

Working example

Bonus (Random change)

function swapImages() {
    var random = Math.floor(Math.random()*3),
        $current = $('#myGallery img:visible');
    $current.hide();
    if($current.index() == random) {
        random = ++random % 4;
    }
    $('#myGallery img').eq(random).show();
}

$(document).ready(function() {
    // Run our swapImages() function every 0.5 secs
    setInterval(swapImages, 500);
});