jquery图片幻灯片随机显示图片答案

【问题标题】：Jquery image slideshow random display of imagesjquery图片幻灯片随机显示图片
【发布时间】：2011-01-27 05:30:46
【问题描述】：

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

http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator 。我需要第一张图片也是随机的。我已经为所有像'rand'这样的li给了一个相同的类。然后

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

但我不知道下一步该怎么做..请帮忙！！

【问题讨论】：

标签： jquery slideshow

【解决方案1】：

您可以使用 James Padolsey 开发的这个很棒的 JQuery shuffle 插件来随机化 LI 元素的顺序。

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

另外，它的源代码很容易阅读（因此更容易理解）。

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

要在幻灯片的上下文中使用它，您可以使用 Mark Alsup 的 JQuery Cycle 插件。先打乱 dom，然后运行幻灯片：

<script>  
 $(document).ready(function() {
    $('.slideshow img').shuffle();
    $('.slideshow').cycle({
        fx: 'fade' 
    });

});
</script>

【讨论】：

【解决方案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
});

【讨论】：

To ramdon start //加载幻灯片 $('div.rotator ul li').shuffle();

【解决方案3】：

您用于幻灯片的代码过多。这可以更简单地完成。看看这个带有随机图像的幻灯片示例：http://jsbin.com/iledo3/3

此处粘贴的代码供参考：

<!doctype html>
<html>
  <head>
    <title></title>
    <style type="text/css">
    #slideshow-container { height:90px; position:relative; }
    #slideshow-container img { position:absolute; left:0; top:0; width:100%; height:100% }
    #slideshow      { position:absolute; left:0; top:0; width:100%; height:100%; list-style:none }
    #slideshow img  { width:120px; height:90px; background-repeat:none; background-position:top left; position:absolute; left:0; top:0 }
    #slideshow      { position:absolute; left:0; top:0; width:100%; height:100%; }
    #slideshow img  { width:120px; height:90px; background-repeat:none; background-position:top left; position:absolute; left:0; top:0 } /* adjust this for your images */
    </style>
  </head>
  <body>

    <div id="slideshow-container">
      <div id="slideshow"> 
          <img src="http://dummyimage.com/120x90/f00/fff.png&text=Image+1"> 
          <img src="http://dummyimage.com/120x90/0f0/fff.png&text=Image+2">
          <img src="http://dummyimage.com/120x90/00f/fff.png&text=Image+3">
          <img src="http://dummyimage.com/120x90/ff0/000.png&text=Image+4">
          <img src="http://dummyimage.com/120x90/0ff/fff.png&text=Image+5">
      </div> 
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //extending jQuery with ':random' selector, best put into separate plugin js file
        jQuery.jQueryRandom = 0;
        jQuery.extend(jQuery.expr[":"],
        {
            random: function(a, i, m, r) {
                if (i == 0) {
                    jQuery.jQueryRandom = Math.floor(Math.random() * r.length);
                };
                return i == jQuery.jQueryRandom;
            }
        });        
        //end :random extend

        $(function() {
          $('#slideshow img').not(':random').hide(); //hide all images except one initially
          setInterval(function(){
            $('#slideshow img:visible').fadeOut('slow')
              .siblings('img:random').fadeIn('slow') //find a random image
               .end().appendTo('#slideshow');}, 
            2000); //2 second interval
        });
    </script>
  </body>
</html>

【讨论】：

我要补充一点，如果您可以在将其呈现为 HTML 之前从服务器随机化，那就更好了。
希望使用此解决方案，但它在 jQuery 1.9.1 中已损坏 :(