Question

我有这个功能，让我的div每隔3秒随机“滑动”一次：

$(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);
});

这是fiddle。问题是有时幻灯片是相同的（生成的随机数连续两次相同）。你可以帮我创建一些变量来存储生成的最后一个数字，这样当函数调用Math.random（）时，如果该数字等于生成的最后一个数字，它会再次调用它。

Answer 1

在随机执行之前，您应该检查哪些p可见。然后，你应该在那个堆栈中玩，以确保你没有随机相同的图像两次。这段代码就是这样做的：

$(function () {
    $('.fadein p:gt(0)').hide();
    setInterval(function () {
        var $p = $('.fadein > p').not(':visible') //Select only the hidden one
        var randomize = Math.floor(Math.random() * $p.length); //Use only those hidden, remove the 1 since we are now on a 0-based index
        $('.fadein > p').fadeOut();
        $p.eq(randomize).fadeIn(); //Use eq on the hidden p
    }, 3000);
});

http://jsfiddle.net/775pR/3/

Answer 2

如果您想使用“all in one”选择器，请尝试使用此示例：

$('.fadein > p' ).fadeOut();
$('.fadein > p:not(:visible):eq(' + Math.floor( Math.random() * ($('.fadein > p' ).length-1) ) + ')' ).fadeIn();

<强> FIDDLE

jQuery Math.random：避免重复相同的项目

2 个答案: