jquery - 在“页面加载”上加载随机图片

Question

我正在尝试使用 JQuery 循环插件在页面加载时加载随机图片。

$(document).ready(function() {
    $('.slideshow').cycle({ 
        fx:     'fade', 
        random:  1 
    });
});     

有什么简单的方法可以做到这一点？

Answer 1

加载随机图像不需要插件。要从一组中加载随机图像，您可以将所有图像放入某个容器中（或者您可以为它们添加任何您想要的类），然后随机选择一个来显示。

HTML：

<div id="slideshow">
  <img src="http://scienceblogs.com/startswithabang/upload/2012/04/why_should_there_be_dark_matte/AS17-148-22727_lrg-thumb-500x500-74032.jpeg" />
  <img src="http://weblogs.marylandweather.com/4526619322_1912218db8.jpg" />
  <img src="http://www.silverstar-academy.com/Blog/wp-content/uploads/2012/03/03-14-12N  00184967.jpg" />     
  <img src="http://cdn.the2012scenario.com/wp-content/uploads/2011/11/sunspot-500x500.jpg" />
</div>

CSS：

 #slideshow {width:500px;height:500px;overflow:hidden}
 #slideshow img {display:none}

JS/JQuery：

$(document).ready(function() {
  var rand = Math.floor(Math.random() * $('#slideshow img').length);
  $('#slideshow img').eq(rand).show();​
  // if you just want to use a class you could do this but is prob better to put them in a container
  // $('img.random').eq(rand).show();
  // var rand = Math.floor(Math.random() * $('img.random').length);
});

Answer 2

在 jQuery 中，

var rand = Math.floor(Math.random() * $('#slideshow img').length);
$("#slideshow img:eq("+rand+")").show();

做.eq(rand).show();是行不通的。