Question

我有以下幻灯片，当您单击按钮时，它会随机显示幻灯片。但是我想在重复之前显示所有幻灯片，例如：3,1,2,4,5 2,1,4,5,3 - 用户在重复之前看到所有幻灯片，而不是现在发生的事情：2,3,4,2,1,2,4,5用户在看到幻灯片5之前已经看过幻灯片2三次。我想也许使用数组会做到但我不知道如何实现这一点。非常感谢任何帮助！

var slides = $('div.slide');
var rand = Math.floor(Math.random() * slides.length);
slides.eq(rand).addClass('active');

$("a.btn").click(function(event){
    event.preventDefault();
    var $active = $('#sliderInner div.slide.active');

    var $sibs  = $active.siblings();
    var rndNum = Math.floor(Math.random() * $sibs.length );
    var $next  = $( $sibs[ rndNum ] );


    $next.css('z-index',2);//move the next image up the pile
    $active.fadeOut(400,function(){//fade out the top image
        $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
        $next.css('z-index',3).addClass('active');//make the next image the top one
    });
});

我也尝试了这个，但它做了同样的事情：

var slides = $('div.slide');
var rand = Math.floor(Math.random() * slides.length);
slides.eq(rand).addClass('active');

$("a.btn").click(function(event){
    event.preventDefault();

    var grp = $("#sliderInner").children();

    Array.prototype.sort.call(grp, function() {
        return Math.round(Math.random())-0.5;
    });

    $('#sliderInner').empty().append(grp);

    var $active = $('#sliderInner div.slide.active');

    var $next = ($active.next().length > 0) ? $active.next() : $('#sliderInner div:first');
    $next.css('z-index',2);//move the next image up the pile
    $active.fadeOut(400,function(){//fade out the top image
        $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
        $next.css('z-index',3).addClass('active');//make the next image the top one
    });
});

Answer 1

没关系我找到了解决方案，也许不是最优雅的解决方案，但它确实有效。如果它对将来的任何人有用：

var slides = $('div.slide');
var rand = Math.floor(Math.random() * slides.length);
slides.eq(rand).addClass('active');

$("a.btn").click(function(event){
    event.preventDefault();
    var $active = $('#sliderInner div.slide.active');


    var $sibs  = $active.siblings().not('.used');
    var rndNum = Math.floor(Math.random() * $sibs.length );
    var $next  = $( $sibs[ rndNum ] );

    $next.css('z-index',2);//move the next image up the pile
    $active.fadeOut(400,function(){//fade out the top image
        $active.css('z-index',1).show().removeClass('active').addClass('used');//reset the z-index and unhide the image
        $next.css('z-index',3).addClass('active');//make the next image the top one
    });

    if ($active.siblings().length-1 == $(".used").length) {
        $('.slide').removeClass('used');
        $active.fadeOut(400,function(){//fade out the top image
            $active.css('z-index',1).show().removeClass('active').removeClass('used');
        });
        }


});

重复之前Jquery随机幻灯片循环

1 个答案: