Carousel for inline elements

About
This script will add a carousel for rotating inline elements. I have tested in IE6, IE7, Firefox 3, Opera 9 and Safari 3 on Windows XP. Not a complicated script so it should work in other browsers as well.

To view a demo mouseover the images..

The carousel should work with any number of inline elements. Here is an example of how to setup the demo on this page.

 1 // Create new carousel container showing 300 px
 2 // with a speed factor of 40 and stepping the
 3 // animation each 50th msec.
 4 var c = JSL.carousel(300, 40, 50);
 5 // Style container sowe can see it
 6 c.style.border = '1px solid #000';
 7 c.style.padding = '4px';
 8 // Add some elements to container
 9 var img = document.createElement('img');
10 img.style.border = '1px solid #000';
11 img.style.marginRight = '4px';
12 // We need to initialize left margin for first child
13 img.style.marginLeft = 0;
14 img.src = 'gfx/ie_100x100.jpg';
15 c.appendChild(img);
16 for(var i=0; i<8; i++) {
17   var img = document.createElement('img');
18   img.style.border = '1px solid #000';
19   img.style.marginRight = '4px';
20   img.src = 'gfx/firefox_100x100.jpg';
21   c.appendChild(img);
22 }
23 // Add carousel to document
24 document.getElementById('carousel').appendChild(c);// Create new carousel container showing 300 px
// with a speed factor of 40 and stepping the
// animation each 50th msec.
var c = JSL.carousel(300, 40, 50);
// Style container sowe can see it
c.style.border = '1px solid #000';
c.style.padding = '4px';
// Add some elements to container
var img = document.createElement('img');
img.style.border = '1px solid #000';
img.style.marginRight = '4px';
// We need to initialize left margin for first child
img.style.marginLeft = 0;
img.src = 'gfx/ie_100x100.jpg';
c.appendChild(img);
for(var i=0; i<8; i++) {
  var img = document.createElement('img');
  img.style.border = '1px solid #000';
  img.style.marginRight = '4px';
  img.src = 'gfx/firefox_100x100.jpg';
  c.appendChild(img);
}
// Add carousel to document
document.getElementById('carousel').appendChild(c);

The second parameter (40) is the factor which determine how fast the rotation should be. The third parameter (50) is the number of milliseconds between each animation step.

Shortcomings

• Stopping the carousel on a mouseout event is somewhat buggy as it is not properly detected. If you can come up with a fix please get in touch.

Download
Get the script here - its only 2.33kb including the license preamble when minified.

Copyright
The script is licensed as GPLv3 which means it is free to use but if you need to alleviate any guilt donations are definitely a possibility.

Enjoy the script.