배너 회전에서 임의의 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 클래스를 줄 것이다, 그것을 명확하게하기 현재 활성 슬라이드는 임의의 숫자와 동일한 색인에 있으며 다른 임의의 숫자를 선택합니다.