有没有办法在这个jquery幻灯片中随机化图像,所以每次页面刷新时它都不会以相同的图像开始?
这是HTML:
<div id="slideshow">
<img src="http://image.jpg" alt="image 1" class="active">
<img src="http://image.jpg" alt="image 2" >
<img src="http://image.jpg" alt="image 3" >
</div>
以下是剧本:
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 6000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 8000 );
});
感谢!!!!
答案 0 :(得分:0)
您可以在页面加载时将active
类随机分配给您的图片代码,例如:
$(document).ready(function() {
$("#slideshow img").removeClass("active");
randomDiv = $("#slideshow img").get().sort(function(){
return Math.round(Math.random())-0.5
}).slice(0,1);
$(randomDiv).addClass("active");
});
因此,每次新的img标记获得活动类并将从该img标记开始
答案 1 :(得分:0)
首先按编号定义所有图像。比如说,'图像1','图像2','图像3'等。不要为任何图像定义活动类。然后使用此代码随机提供任何图像“活动”类。
$(document).ready(function() {
var random = 1 + Math.floor(Math.random() * 3);
$('.image ' + random).addClass('active');
})
如果有'n'个图像,请使用var random = 1 + Math.floor(Math.random()* n);