带有随机超时的jQuery幻灯片 [英] jQuery Slideshow with Random Timeouts

问题描述

我正在尝试在我的网站首页上设置多个迷你幻灯片.如果您现在去那里( http://www.element17.com/)，您会看到有六个图片类别，目前一些PHP从数据库中获取五张随机图片，并将它们全部放入"slideshow" div中.这似乎是我所见过的jQuery幻灯片插件的最受欢迎设置.我希望将这六个图像中的每一个都放到五个随机图像中进行幻灯片显示.

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.

我已经看到Cycle插件支持此功能，但是我未能成功实现它.我不需要花哨的过渡(只需淡入淡出)，也不需要任何其他功能，所以看来这可能是从头开始最容易做到的.我对jQuery的经验不多，所以我希望有人至少可以让我入门?

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?

非常感谢！

推荐答案

Cycle插件出了什么问题?您应该能够像这样(未试用)使用它:

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.

这篇关于带有随机超时的jQuery幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！