在「頁面加載」中加載一個隨機圖片

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();不起作用。