javascript - jQuery:随机淡入淡出div(无论项目数量如何)

Question

我有这个片段，它使我的 div 每 3 秒“滑动”一次:

$(function(){
    $('.fadein p:gt(0)').hide();
    setInterval(function(){$('.fadein > :first-child').fadeOut().next('p').fadeIn().end().appendTo('.fadein');}, 3000);
});

<div class="fadein">
    <p><img src="">image1</p>
    <p><img src="">image2</p>
    <p><img src="">image3</p>
</div>

我想随机显示 div 的顺序..问题是 div 的数量不会每次都相同..所以我不能使用

setInterval(function() {
  var number = 1 + Math.floor(Math.random() * 3);
  ...

因为它并不总是 3.. 而且我不能每次都更改脚本。你能帮我吗？

这是一个 fiddle :http://jsfiddle.net/S4SmM/4/

Answer 1

使用jQuery Length属性(property)。它将获取您拥有的 div 数量，并且您可以像您想要的那样使用 Math.random 函数。

编辑

我已经编辑了您的fiddle让它做我认为你想做的事。有时会连续几次显示同一张图片，但我会让你决定如何处理它，这会出现一个小问题。

这也是代码

$(function () {
$('.fadein p:gt(0)').hide();
setInterval(function () {
    var randomize = 1 + Math.floor(Math.random() * $('.fadein > p').length);
    $('.fadein > p').fadeOut();
    $('.fadein > :nth-child(' + randomize + ')').fadeIn();
}, 3000);
});