私はリンクからのスライドショーを使用しています：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どうするかで立ち往生しています！
James Padolseyのこの素晴らしいJQueryシャッフルプラグインを使用して、LI要素の順序をランダム化できます。
私は最近、このプロジェクトで使用しましたが、私のニーズにはうまくいきました。
さらに、そのソースは非常に読みやすく（したがってわかりやすい）。
http://james.padolsey.com/javascript/shuffling-the-dom/
スライドショーの文脈でこれを使用するには、マーク・AlsupでjQueryのサイクルのプラグインを使用することができます。最初のDOMをシャッフルし、スライドショーを実行します。ここでは
<script>
$(document).ready(function() {
$('.slideshow img').shuffle();
$('.slideshow').cycle({
fx: 'fade'
});
});
</script>
は同じティンを行い、別の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
});
ramdonを開始するには//スライドショーを読み込みます $（ 'div.rotator ul li'）。shuffle（）; – Pablogrind
スライドショーに使用したコードが多すぎます。これははるかに簡単に行うことができます。参考のためにここに貼り付け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で壊れています:( – egr103
しかし、どのように私はスライドショーでそれを実装することができ、ランダムな画像をスライドショーのこの例を見たことがありますか？ – dbr