Добавление рандомизации к простому ротатору отзывов

Был потрясающий, супер-минимальный ротатор отзывов, который я нашел здесь , но мне любопытно, как заставить его просто рандомизировать результаты. Вот ротатор, как он сейчас работает:

$('.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/


person vectyr    schedule 11.03.2014    source источник


Ответы (3)


Попробуй это:

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/

person Ethan Brown    schedule 11.03.2014
comment
Гениальные вещи и такие простые. - person vectyr; 08.04.2015

Этот код гарантирует, что один и тот же элемент не будет показан дважды, и продолжит работать, если вы измените количество отзывов. Первый отображаемый элемент также является случайным.

Демо

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

});
person Community    schedule 11.03.2014

Эта проблема продолжала грызть меня, и я понял, что настоящая проблема заключается в том, что вам нужен способ перетасовать отзывы. Если бы у вас был способ сделать это, ваша исходная функция даже работала бы так, как предполагалось. Как оказалось, перетасовать список элементов 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);
}

Затем вы можете реализовать перетасовку Фишера-Йейтса:

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/

person Ethan Brown    schedule 12.03.2014