the easiest way to do it would be to have a set number of "sponsers" on each slate. for example, you'll have a ul with 5 list item(or how every many images you want across) and within each list item, you place images that will rotate in that div. Next, you have a setInterval that generates a random number between one and 5 to decide which list item to rotate the image on. to rotate the image, simply hide the current one and show the next one.
it uses divs, however, you could simply replace the divs with images, or anchor tags wrapping an image as long as it has the rotator-image class.
Edit: here's the code(i've only tested it in google chrome):
- $(function(){
-
- var delay = 2000;
-
-
-
-
- $('#rotator > li').each(function(){
-
- var $imgArr = $(this).children();
-
- $imgArr.eq(Math.floor(Math.random()*$imgArr.length)).show();
- });
-
- setInterval(function(){
- changeImage();
- },delay);
-
- function changeImage(){
-
- var $liArr = $('#rotator > li');
-
- var $currLi = $liArr.eq(Math.floor(Math.random()*$liArr.length));
-
- var $currImg = $('.rotator-image:visible', $currLi);
- if ($currImg.next().length == 1) {
- var $next = $currImg.next();
- } else {
- var $next = $('.rotator-image:first', $currLi);
- }
- $currImg.fadeOut();
- $next.fadeIn();
- }
- });
Edit:
i made a blog post out of this: