jQuery Slideshow with Random Timeouts

问题:

I am trying to set up multiple mini slideshows on the homepage of my site. If you go there now (http://www.element17.com/), you'll see there's six image categories, and currently some PHP grabs five random images from the database and puts them all in a "slideshow" div. This seems to be the most popular setup for the jQuery slideshow plugins I've seen. I would like each of these six to slideshow through the five random images.

What I would like, though, is for the timeout on each slide to be random, so that the six slideshows don't sync up with each other.

I have seen that the Cycle plugin supports this but I have been unsuccessful in implementing it. I don't need fancy transitions (just fading) and I don't need any other features, so it seems like maybe this would be easiest to do from scratch. I don't have a lot of experience with jQuery though, so I am hoping that someone can at least get me started?

Thanks very much!

回答1:

What went wrong with the Cycle plugin? You should be able to use it like this (untested):

//time in ms
var minTime = 2000;
var maxTime = 5000;
$(document).ready(function() {
    $('.slideshow').each(function(ind) {
        $(this).cycle({
            timeout:Math.floor((Math.random()*(maxTime-minTime))+minTime),
            speed:1000
        });
    });
});

Just change the min and max times as desired.