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 Script.aculo.us to do a very simple looking yet quite appealing slide in/out. You’ll need to load the prototype.js file and Script.aculo.us’ 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 Script.aculo.us
// 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];
else
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’});
i++;
if(i >= shuffle_list.length)
i = 0;
setTimeout(’imageShuffle(’+i+’);’, shuffle_time);
}