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圖像幻燈片隨機顯示圖像

回答

相關問題