【问题标题】:jQuery Slideshow with Random Timeouts带有随机超时的 jQuery 幻灯片
【发布时间】:2011-04-04 17:47:04
【问题描述】:

我正在尝试在我的网站主页上设置多个迷你幻灯片。如果你现在去那里(http://www.element17.com/),你会看到有六个图像类别,目前一些 PHP 从数据库中抓取五个随机图像并将它们全部放在一个“幻灯片”div 中。这似乎是我见过的 jQuery 幻灯片插件最流行的设置。我希望这六个中的每一个都通过五个随机图像幻灯片放映。

不过,我希望每张幻灯片的超时时间是随机的,这样六张幻灯片就不会相互同步。

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

非常感谢!

【问题讨论】:

    标签: jquery html slideshow


    【解决方案1】:

    Cycle 插件出了什么问题?你应该可以像这样使用它(未经测试):

    //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
            });
        });
    });
    

    只需根据需要更改最小和最大时间。

    【讨论】:

    • 这几乎是完美的!如何将您的超时与该 Cycle 插件的其他参数结合起来?似乎当我添加另一个参数(如速度)时,它会破坏幻灯片。
    • 我已经编辑了我的答案,包括设置速度。如果要添加更多参数,请确保除最后一个之外的所有参数后跟逗号。
    • 啊,看看你的页面源代码,问题是你的超时线有点错误。它缺少“Math.floor”,并且 floor 函数的右括号被放置在下一行。
    • 我删除了 Math.floor,因为我认为没有理由四舍五入到最接近的整数。不过,我现在已经弄清楚了。感谢您的所有帮助!
    猜你喜欢
    • 1970-01-01
    • 2016-11-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-03-10
    • 2012-08-24
    • 1970-01-01
    相关资源
    最近更新 更多