Question

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

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

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

但我仍然坚持下一步该怎么做..plz help !!

Answer 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>

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

此处粘贴的代码仅供参考：

<!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>

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

3 个答案: