バナーローテーションでランダムdivを選択する方法

Question

私は自分のウェブサイトのバナーローテーションを作成することができましたが、1,2,3,1,2,3などのように回転します。私はいくつかの研究をしましたが、私の問題に対する具体的な解決策を見つけることができないようです。

問題はランダムに回転させて、リストされた最初のバナーが必ずしも最初に表示されるとは限りませんということです。

<script type="text/javascript"> 
    $(window).load(function() { 
    startRotator("#rotator"); 
    }) 
</script> 

<div id="rotator"> 

<div> 
<a href="http://www.website.com" onClick="ga('send', 'event', 'Middle Banner', 'Banner_Click', 'Middle Banner 1 November 2017');" target="_blank"> 
<img class="mid-banner" src="/images/banners/middle/banner1.jpg" /> 
</a> 
</div> 

<div> 
<a href="http://www.website.net" onClick="ga('send', 'event', 'Middle Banner', 'Banner_Click', 'Middle Banner 2 November 2017');" target="_blank"> 
<img class="mid-banner" src="/images/banners/middle/banner2.jpg" /> 
</a> 
</div> 

<div> 
<a href="http://www.website.co.uk" onClick="ga('send', 'event', 'Middle Banner', 'Banner_Click', 'Middle Banner 3 November 2017');" target="_blank"> 
<img class="mid-banner" src="/images/banners/middle/banner3.jpg" /> 
</a> 
</div> 

</div> 

<script> 
function rotateBanners(elem) { 
var active = $(elem+" div.active"); 
var next = active.next(); 
if (next.length == 0) 
next = $(elem+" div:first"); 
active.removeClass("active").fadeOut(200); 
next.addClass("active").fadeIn(200); 
} 

function prepareRotator(elem) { 
$(elem+" div").fadeOut(0); 
$(elem+" div:first").fadeIn(0).addClass("active"); 
} 

function startRotator(elem) { 
prepareRotator(elem); 
setInterval("rotateBanners('"+elem+"')", 7000); 

} 
</script> 

3,1,2,1,3,2などのようにランダムな順序で表示されるような方法はありますか？

ご協力いただければ幸いです！

おかげで、 デイブ

Answer 1

いくつかの方法があります。ここに私がすることがあります。か否かをチェックすることによって

// Select all slides 
var slides = $('div.slide'); 
// Pick the index of one to show at random (well, pseudo-random) 
var showIndex = Math.floor(Math.random() * (slides.length - 1)); 
// Fade out the active slide 
$('.active', slides).fadeOut(200); 
// Get the slide to show by its index and fade it in 
slides.eq(showIndex).fadeIn(200); 

あなたはまた、それが少し良く作ることができます：JSで次に

<div class="slide"> 

：

まず、私はスライドdiv SAクラスを与えるだろう、それを明確にします現在アクティブなスライドは、乱数と同じインデックスにあり、別の乱数を選択します。

var showIndex = -1; 
while (showIndex != slides.index('.active')) { 
    showIndex = Math.floor(Math.random() * (slides.length - 1)); 
}