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

我使用的链接幻灯片显示：jquery图像幻灯片随机显示图像

http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator。我需要第一个图像也是一个随机的。我给了一个相同的类所有像李“rand'.Then

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

但我坚持要做什么next..plz帮助！

来源

2011-01-27 dbr

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

我最近在项目中使用过它，它对我的需求非常好。

此外，它的来源是很容易阅读（因此更容易理解）。

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

要在幻灯片的情况下使用此功能，您可以通过马克Alsup使用JQuery周期插件。先洗好DOM，然后运行幻灯片：

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

}); 
</script>

来源

2011-01-27 05:42:45 seamusjr

但我怎么能实现它在幻灯片放映？ – dbr 2011-01-27 05:47:07

这里是另一个jQuery插件，做了同样的铃声：

http://yelotofu.com/labs/jquery/snippets/shuffle/demo.html

都会响起，你给，你可以在这里下载

演示

http://www.alohatechsupport.net/downloads/image-rotator.zip

请务必遵循这些intstructions代码

//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 
});

来源

2011-01-27 06:31:18 Neskie

ramdon start //载入幻灯片 $（'div.rotator ul li'）。shuffle（）; – Pablogrind 2011-11-02 16:20:31

你已经使用了幻灯片的代码是太多了。这可以做得简单得多。看看幻灯片的这个例子与随机图像：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>

来源

2011-01-27 07:37:36

我想补充一点，如果你可以在将服务器呈现为HTML之前从服务器中随机化，那就更好了。 – 2011-01-27 07:38:20

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

回答

相关问题