向简单的推荐旋转器添加随机化答案

【问题标题】：Adding randomization to simple testimonial rotator向简单的推荐旋转器添加随机化
【发布时间】：2014-03-11 22:28:10
【问题描述】：

我发现here 有一个很棒的、极简的推荐旋转器，但我很好奇如何获得它来简单地随机化结果。这是现在起作用的旋转器：

$('.testimonials div:first').show();

setInterval(function(){ 
    $('.testimonials div:first-child')
        .fadeOut(1000)
        .next('div')
        .delay(1000)
        .fadeIn(1000)
        .end()
        .appendTo('.testimonials') 
},3000);

http://jsfiddle.net/xXRwA/9/

【问题讨论】：

标签： javascript jquery rotator testimonials

【解决方案1】：

此代码可确保同一项目不会显示两次，并且在您更改推荐的数量时继续工作。显示的第一个项目也是随机的。

Demo

$(document).ready(function() {

    $('.testimonials div').eq(Math.floor((Math.random() * $('.testimonials div').length))).show();

    setInterval(function() {

        var $items = $('.testimonials div');
        if ($items.length < 2) {
            return;
        }

        var $currentItem = $items.filter(':visible');
        var currentIndex = $currentItem.index();
        var nextIndex = currentIndex;
        while (nextIndex == currentIndex) {
            nextIndex = Math.floor((Math.random() * $items.length));
        }
        $currentItem.fadeOut(1000, function() {
            $items.eq(nextIndex).fadeIn(1000);
        });

    }, 3000);

});

【讨论】：

【解决方案2】：

试试这个：

var $items = $('.testimonials .item');

function getRandomItem(){
    return $items.eq(Math.floor($items.length * Math.random()));
}

getRandomItem().show();

setInterval(function(){ 
    var $outgoing = $items.filter(':visible');
    var $incoming = getRandomItem();
    $outgoing.fadeOut(1000, function(){
        $incoming.fadeIn(1000);
    });
}, 3000);

演示：http://jsfiddle.net/JWGbz/6/

【讨论】：

很棒的东西，很简单。

【解决方案3】：

这个问题一直困扰着我，我意识到真正的问题是你想要一种洗牌的方式。如果您有办法做到这一点，那么您的原始功能甚至可以按预期工作。事实证明，改组 jQuery 元素列表并不像您想象的那么容易。我首先实现了一个允许您交换两个任意 jQuery 元素的函数（这避免了使用 jQuery.clone，它有副作用，比如删除事件侦听器）：

function swap($a, $b){
    var $aNext = $a.next(),
        $aParent = $a.parent();
    $a.insertAfter($b);
    if($aNext.length) $b.insertBefore($aNext);
    else $aParent.append($b);
}

然后您可以实现 Fisher-Yates shuffle：

function shuffle($items){
    var i, j;
    for(i=$items.length-1; i>1; i--){
        j = Math.floor(Math.random() * (i+1));
        swap($items.eq(i), $items.eq(j));
    }
}

现在您可以简单地随机播放您的所有推荐：

shuffle($('.testimonials .item'));

然后使用您的原始代码：

$('.testimonials div:first').show();

setInterval(function(){ 
    $('.testimonials div:first-child')
        .fadeOut(1000)
        .next('div')
        .delay(1000)
        .fadeIn(1000)
        .end()
        .appendTo('.testimonials') 
},3000);

当然，一旦你完成了所有的推荐，你可能想要重新洗牌，不要一遍又一遍地重复相同的顺序。

演示：http://jsfiddle.net/JWGbz/7/

【讨论】：