0

我有以下幻灯片，当您单击按钮时会随机显示一张幻灯片。但是我希望它在重复之前显示所有幻灯片，例如： 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
    });
});
4

1 回答 1

0

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

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');
        });
        }


});
于 2013-03-22T11:35:59.920 回答