このjavascriptスライダーループをランダムにする方法

Question

Javascriptの理解を助けるための小さなプロジェクトをビルドしています。私は誰かがpbfNext（）関数が押されるたびにランダムにする必要があるこのスライダーループを作る方法を私に見せることができればと思っていました。

私はこのjQueryのバージョンを知る必要はありません。ありがとうございました。

Javascriptを：

var slideIndex = 1; 
showSlides(slideIndex); 

function pbfNext(n) { 
    showSlides(slideIndex += n); 
    } 

function showSlides(n) { 
    var i; 
    var slides = document.getElementsByClassName("worksheet"); 
    if (n > slides.length) {slideIndex > 1} 
    if (n < 1) {slideIndex = slides.length} 
    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    slides[slideIndex-1].style.display = "block"; 
    } 

HTML：

<div class="worksheet"> 
     <iframe src="\Users\andrew.lee\Desktop\Publifiedlabs\Admin\Programming\JS-Rand-Worksheets-v1.0\arrays.html" class="pbf-iframe"></iframe> 
    </div> 
    <div class="worksheet"> 
      1<iframe src="\Users\andrew.lee\Desktop\Publifiedlabs\Admin\Programming\JS-Rand-Worksheets-v1.0\arrays.html" class="pbf-iframe"></iframe> 
    </div> 
    <div class="worksheet"> 
      2<iframe src="\Users\andrew.lee\Desktop\Publifiedlabs\Admin\Programming\JS-Rand-Worksheets-v1.0\arrays.html" class="pbf-iframe"></iframe> 
    </div> 

Answer 1

pbfNext機能：

function pbfNext(n) { //You don't actually need to pass anything into this function 
    var numberOfSlides = document.getElementsByClassName("worksheet").length; //Get the number of slides. You need this to create the range of randomness 
    var randomSlideNumber = Math.floor(Math.random() * numberOfSlides) //Generate a random number between 0 and 1 * by number of slides then round down. Returns a number between 0 and numberOfSlides-1 
    showSlides(randomSlideNumber); //Insert the random number into the showSlides function 
} 

showSlides機能：

function showSlides(n) { 
    var slides = document.getElementsByClassName("worksheet"); 
    for (let i = 0; i < slides.length; i++) { //Cycle through the "slides" elements 
     slides[i].style.display = "none"; //Set the display to all of the "slides" elements to none 
    } 
    slides[n].style.display = "block"; //Set randomly selected "slides" element to block. 
    } 

ボーナス - 行に二回採取されるからランダムスライド 防止します。

は、私は、この行があれば（N> slides.length `何のためにあるのか疑問に思うrandomSlideNumberと

//Create a new random number between a range of numbers. 
//Then add the new random to the previous random number to create a new random number. 
if (previousIndex === randomSlideNumber){ //Check if current random index is same as the previous index 
    let min = randomSlideNumber === 0 ? randomSlideNumber + 1 : randomSlideNumber * -1; // if random number is 0 the minimum is -1 else the minimun is the negetive of the number 
    let max = numberOfSlides - randomSlideNumber; //The maximun is the number of slides minus the random 
    randomSlideNumber += Math.floor(Math.random() * (max - min) + min); //Generate a random number from the range of min & max and add/subtract from the randomSlideNumber 
} 
previousIndex = randomSlideNumber; 

Answer 2

変更if (n > slides.length) {slideIndex > 1}へ：

if (n >= slides.length) { slideIndex = 0 } 

ランダムの場合とpbfNext機能を置き換えます。

function pbfNext() { 
    var randomIndex = Math.floor(Math.random() * slides.length); 
    showSlides(randomIndex); 
}