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();无效。

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

2 个答案: