Jquery图像幻灯片随机显示图像

我正在使用链接中的幻灯片放映：

http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator 。 我需要第一张图片也是随机图片。 我给了所有像“兰德”这样的李同一个class级。然后

var curr=$('div.rotator ul li.rand'); var rc= Math.floor(Math.random() * curr.length); var current=$(curr[rc]); 

但我坚持下一步该做什么..帮助!!

Answer 1

您可以使用James Padolsey这个非常棒的JQuery shuffle插件随机化你的LI元素的顺序。

我最近在一个项目中使用它，它非常适合我的需求。

此外，它的来源非常容易阅读（因此更容易理解）。

http://james.padolsey.com/javascript/shuffling-the-dom/

要在幻灯片放映的上下文中使用它，您可以使用Mark Alsup的JQuery Cycle插件。 首先将dom洗牌，然后运行幻灯片：

Answer 2

这是另一个jQuery插件，它执行相同的操作：

http://yelotofu.com/labs/jquery/snippets/shuffle/demo.html

关闭你提供的演示，你可以在这里下载

http://www.alohatechsupport.net/downloads/image-rotator.zip

请确保在代码中遵循这些说明

 //Un-comment the 3 lines below to get the images in random order var sibs = current.siblings(); var rndNum = Math.floor(Math.random() * sibs.length ); var next = $( sibs[ rndNum ] ); 

然后在您的文档准备部分下面将显示如下：

 $(document).ready(function() { //Load the slideshow $('div.rotator ul').shuffle(); theRotator(); $('div.rotator').fadeIn(1000); $('div.rotator ul li').fadeIn(1000); // tweek for IE }); 

Answer 3

您用于幻灯片放映的代码太多了。 这可以做得更简单。 看看这个带有随机图像的幻灯片示例： http ： //jsbin.com/iledo3/3

粘贴的代码供参考：