随机jQuery幻灯片

时间:2017-11-07 10:43:17

标签: javascript jquery

我有一个jQuery幻灯片,我想切换到随机图像而不是下一个,但我找不到随机化它的方法。这是我的幻灯片功能,它通过我的照片总是以相同的顺序。

$("#header-slide > div:gt(0)").hide();
setInterval(function() {
    $('#header-slide > div:first')
        .fadeOut(2000)
        .next()
        .fadeIn(2000)
        .end()
        .appendTo('#header-slide');     
}, 5000);

和我的slider.php文件看起来像这样,每个图像都有一个:

<div>
    <src="..." />
</div>
<div>
    <src="..." />
</div>  

编辑:完整且有效的解决方案现在是:

$("#header-slide > div").hide();
temp = $('#header-slide > div:eq(' + Math.floor(Math.random() * $('#header-slide > div').length) + ')')
        .fadeIn(2000);
setInterval(function() {
    temp.fadeOut(2000);
    temp = $('#header-slide > div:eq(' + Math.floor(Math.random() * $('#header-slide > div').length) + ')')
        .fadeIn(2000);
}, 5000);

1 个答案:

答案 0 :(得分:2)

您可以将:eq选择器与随机数组合使用:

$('.slide:eq(' + (Math.random() * $('.slide.length')-1) + ')')