Image rotation in jQuery

Question

I have 10 images on a page which has 2 buttons: next and previous. On next I want to go from the 1st to 10th image and vice versa for previous button. This is my html code:

   <div id="Div1"> <img class='display' src=""  alt="adf"/></div>
    <button id="Button1">prev</button>
    <button id="Button2">next</button>
<div id='Div2'>
     <img src="a_large.jpg" alt="aadf" />
    <img src="b_large.jpg" alt="dfD" />
     <img src="c_large.jpg" alt="aadf" />
    <img src="d_large.jpg" alt="dfD" />
     <img src="e_large.jpg" alt="aadf" />
    <img src="f_large.jpg" alt="dfD" />
     <img src="g_large.jpg" alt="aadf" />
    <img src="h_large.jpg" alt="dfD" />
     <img src="i_large.jpg" alt="aadf" />
    <img src="j_large.jpg" alt="dfD" />
    </div>

I am newbie to jQuery. Can you please tell me the code for next and previous buttons. Thanks in advance.

do a google search for 'jquery image rotator'. then ask for help when you have at least tried something — robasta, Aug 27 '12 at 09:45
You don't want to rotate your images - you're after a slideshow. Use malsup's jQuery cycle plugin http://jquery.malsup.com/cycle/ because you're using jQuery for your site already. It's very easy to implement, there's a bare-bones version that won't slow page speed down, and it works for small, medium and large applications. Maybe show the code you've tried in a jsfiddle or jsbin... — Systembolaget, Aug 27 '12 at 09:47
If you are really after rotating images, then you can do it via CSS transformations. — Systembolaget, Aug 27 '12 at 09:50

score 0 · Accepted Answer · answered Aug 27 '12 at 10:01

Don't keep all images within the div when you need to show only 1. Keep the names of the images within an array, like:

arrimg = ['a_large.jpg','b_large.jpg','b_large.jpg'...'j_large.jpg']

Keep only the first image initially, with a value of 0 for the ind property:

<div id='Div2'>
  <img src="a_large.jpg" alt="aadf" ind = '0' />
</div.

Then do something like (assign your to buttons a class of say button to reduce the number of lines of code):

$(".button").click(function() {
   if ($(this).prop('id') == 'Button1') {
     if ($("#Div2 img").prop('ind') != 0) {
        ind = parseInt($("#Div2 img").prop('ind'));
        $("#Div2 img").prop({'src': arrimg[ind-1],'ind':(ind-1)+"");
    }
    else {
         $("#Div2 img").prop({'src': arrimg[9],'ind':'9');
    }
    }
    else {
       if ($("#Div2 img").prop('ind') != 9) {
        ind = parseInt($("#Div2 img").prop('ind'));
        $("#Div2 img").prop('src': arrimg[ind+1],'ind': (ind+1)+"");
    }
    else {
         $("#Div2 img").prop('src': arrimg[0],'ind':0});
    }
    }          
});

score 0 · Answer 2 · answered Aug 27 '12 at 10:12

Here's a way to prepload the images and then cycle through the preloaded images on your buttons:

// preload images
var preloads = [];
var imageIndex = 0;
function preloadImages() {
    var img, base = "a".charCodeAt(0);
    for (var i = 0; i < 10; i++) {
        img = new Image();
        img.src = String.fromCharCode(base + i) + "_large.jpg";
        preloads.push(img);
    }
}

preloadImages();

$(document).ready(function() {
    $("#Button2").click(function() {
        ++imageIndex;
        if (imageIndex >= preloads.length) {
            imageIndex = 0;
        }
        $("#Div1 .display").attr("src", preloads[imageIndex].src);
    });

    $("#Button1").click(function() {
        --imageIndex;
        if (imageIndex < 0) {
            imageIndex = preloads.length - 1;
        }
        $("#Div1 .display").attr("src", preloads[imageIndex].src);
    });

    // load the first image        
    $("#Div1 .display").attr("src", preloads[imageIndex].src);

});

Demonstration (without the actual images): http://jsfiddle.net/jfriend00/MKHJC/

Image rotation in jQuery

2 Answers2