在这个jQuery幻灯片中随机化图像

有没有一种方法来随机化这个jQuery幻灯片中的图像，所以每次页面刷新时它不会以相同的图像开始？在这个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); 
});

谢谢!!!!

来源

2013-01-21 user1931012

您可以在滑动切换功能中尝试'Math.random（）'。使其在0和2之间生成并使用它来索引图像 – Saju

不，因为您的图像被硬编码到您的HTML中。您可以在加载页面时获得javascript来切换它（image1会始终显示一秒钟），或者您可以让javascript将这些图片元素放在一起，并随机分配哪个图片用于“.active”类。 – George

你可以随机分配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标签

来源

2013-01-21 10:51:48

首先定义启动所有图像都按编号分类。说'图像1'，'图像2'，'图像3'等。不要为任何图像定义活动类。然后使用此代码随机给出任何图像“活动”类。

$(document).ready(function() { 
    var random = 1 + Math.floor(Math.random() * 3); 
    $('.image ' + random).addClass('active'); 
})

如果有 'n' 个数量的图像，使用VAR随机= 1 + Math.floor（的Math.random（）* N）;

来源

2013-01-21 10:56:05 user1995997

在这个jQuery幻灯片中随机化图像

回答

相关问题