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