0

ボタンをクリックするとランダムにスライドが表示される次のスライドショーがあります。ただし、繰り返す前にすべてのスライドを表示したいと思います。たとえば、3,1,2,4,5 2,1,4,5,3-ユーザーは、繰り返す前にすべてのスライドを表示します。現在の状況：2、3、4、2、1、2、4、5ユーザーはスライド5を表示する前にスライド2を3回表示しています。アレイを使用すればうまくいくと思いますが、方法がわかりません。これを実装します。どんな助けでも大歓迎です！

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 に答える