2

次のようなHTMLのブロックがあります。

<div id="banners">
    <a href="p1.html"><img src="img1.jpg" /></a>
    <a href="p2.html"><img src="img2.jpg" /></a>
    <a href="p3.html"><img src="img3.jpg" /></a>
    <a href="p4.html"><img src="img4.jpg" /></a>
    <a href="p5.html"><img src="img5.jpg" /></a>
</div>

JavaScriptを使用して、これらの画像のうち2つとそれに対応するリンクをランダムに選択して表示し、他の画像は非表示にします。また、重複する必要はありません。つまり、img1.jpgimg1.jpgのようなものを同時に表示することは避けたいと思います。

jQueryがサイトで使用されているので、提案されたソリューションがjQueryソリューションであるとよいでしょう。

このサイトのバックエンドにアクセスできないのは残念です。さもないと、サーバー側のソリューションを検討します。この場合、それは不可能です。

4

3 に答える 3

7 
var allBanners = $('#banners a');
allBanners.hide();

var index = Math.floor(Math.random() * allBanners.length);
allBanners.eq(index).show();

var index2 = Math.floor(Math.random() * allBanners.length - 1);
allBanners.not(allBanners.eq(index)).eq(index2).show();

デモ

于 2012-08-09T11:33:12.550 に答える
2 
var elem = $("#banners a");
var img1 = Math.floor(Math.random() * elem.length), 
    img2 = Math.floor(Math.random() * elem.length);

while (img1===img2) {
  img2 = Math.floor(Math.random() * elem.length);
}

elem.hide();
elem.eq(img1).show();
elem.eq(img2).show();

フィドル </p>

于 2012-08-09T11:36:19.150 に答える
1 
$('a').hide();
var count = 0;
while(count < 2) {
var number = 1 + Math.floor(Math.random() * 5); 
if($('a[href="p' + number + '.html"]:visible').length == 0) {
 $('a[href="p' + number + '.html"]').show();
 count++;
}
}

これにより、これら 2 つの画像を選択する際に偏りのないランダム性が保証されます。

于 2012-08-09T11:38:36.587 に答える