Image block rotation using


Here's a handle little Javascript function that'll let you rotate a set of DIVs as needed, e.g. to rotate a series of images for a slideshow. It uses to do a very simple looking yet quite appealing slide in/out. You'll need to load the prototype.js file and' effects.js file before running the code. One thing to note is that you can use any object to do this - DIVs, IMGs, etc, just assign the IDs accordingly, which is useful if you need to rotate entire code blocks and not just individual images. Enjoy!

// Shuffle a series of divs using
// Set it up like this:
// var shuffle_list = ['div1', 'div2', 'div3']; // an array of DIV IDs to rotate
// var shuffle_time = 8000; // 8 seconds
// var shuffle_effect = 'blind'; // the effect to us: 'appear', 'blind' or 'slide'
// setTimeout('imageShuffle();', shuffle_time);

function imageShuffle() {
if(arguments.length == 1)
var i = arguments[0];
var i = 0;
var next = i + 1;
if(next >= shuffle_list.length)
next = 0;
new Effect.toggle(shuffle_list[i], shuffle_effect, {queue: 'end'});
new Effect.toggle(shuffle_list[next], shuffle_effect, {queue: 'end'});
if(i >= shuffle_list.length)
i = 0;
setTimeout('imageShuffle('+i+');', shuffle_time);

1 Comment

Hi, great solution but there


great solution but there are any example?