Question

我正在构建一个小项目来帮助更好地理解Javascript。我希望有人能告诉我如何制作这个滑块循环每次按下pbfNext（）函数时我都必须随机。

我不需要知道这个javascript的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

将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);
}

Answer 2

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.
  }

奖金 - 防止随机滑动连续两次被拾取。

添加一个新的全局变量，如var previousIndex = null;

var previousIndex = null; //this will keep track of the previous slide

将以下内容添加到pbfNext和randomSlideNumber之间的showSlides(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;

如何使这个javascript滑块循环是随机的

2 个答案: