Question

I was trying to find a way to remove the math.random function from this code, but no success. I need the code that is used for slides to show them in the order of given string. When I remove math.random the first picture (linked from html) appears, and the pictures from the string don’t load up. Does anyone know how to get remove the math.random from this code please?

$(function() {
var images = ["home_photo_welshboy.jpg","home_photo_jam343.jpg","home_photo_xdjio.jpg","home_photo_ccgd.jpg"];
$('<img>').attr({'src':'http://l.yimg.com/g/images/'+images[0],'id':'bg','alt':''}).appendTo('#bg-wrapper').parent().fadeIn(1000);
    $('.change').click(function(e) {
    e.preventDefault();
    var image = images[Math.floor(Math.random()*images.length)];
        $('#bg').parent().fadeOut(200, function() {
            $('#bg').attr('src', 'http://l.yimg.com/g/images/'+image); 
              $(this).fadeIn(200);
        });
    });
});

Answer 1

Keep a counter for the current image:

$(function() {
    // ...
    var current_image = 0;

    $('.change').click(function(e) {
        // ...
        var image = images[current_image++ % images.length];
        // ...
    });
});

Each click current_image increases and “wraps around” because of the modulus.

Of course you can also make it more explicit:

current_image = (current_image + 1) % images.length;
var image = images[current_image];