Question

如何让 slideIndex 返回到 slideIndex

2022-04-09

217

javascript arrays slider undefined

我试图理解为什么此代码没有返回到 slideIndex = 0;

有人可以解释一下吗，在第四次单击时，我得到的是 undefined 而不是跳回到幻灯片的第一个索引？

谢谢您的解释。

slideIndex = 0;

    function nextSlide() {

        console.log(slides[slideIndex]);   
               

       slideIndex++;

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

实际上这是整个代码，所以我试图理解为什么 slideIndex 没有跳回到 slideIndex=0; 一个 slideIndex > myArray.length; 它需要跳回到初始化 slideIndex，但我收到此错误：

未捕获的 TypeError：无法读取 HTMLButtonElement 中未定义的属性（读取“style”）。

请帮忙：

slideIndex=0;

const prevbtn = document.querySelector(".prev");
const nextbtn = document.querySelector(".next");

let myArray = document.querySelectorAll("img");
let i = 0;


for (i = 0; i < myArray.length; i++) {
    myArray[i].style.display = "none";
  }
  
  myArray[slideIndex].style.display = "block";


  nextbtn.addEventListener("click", function(){

    myArray[slideIndex+1].style.display="block";
    
   slideIndex++;

   if(slideIndex >= myArray.length-1){
    console.log("yes");
slideIndex=0;
}
});

prevbtn.addEventListener("click", function(){
});

Answer 1

（此答案指的是作者在另一个答案中提供的代码）

问题出在这行： myArray[slideIndex+1].style.display="block";

假设 myArray 中有 9 个项目，而 slideIndex 是 8。那么上面的代码会尝试在不存在的 myArray[9] 上设置样式。

您可以通过将样式更改移动到调整并验证 slideIndex 之后（在接下来的两行中）来解决此问题，也可以使用模数调整，例如： myArray[(slideIndex+1)%myArray.length].style.display="block";

Answer 2

这是可行的，但我不确定这是否是一个好的编写代码，除非我可以简化代码。

let slideIndex=0;

const prevbtn = document.querySelector(".prev");
const nextbtn = document.querySelector(".next");

let myArray = document.querySelectorAll("img");
let i = 0;

for (i = 0; i < myArray.length; i++) {
    myArray[i].style.display = "none";
    }

myArray[slideIndex].style.display = "block";

nextbtn.addEventListener("click", function(){

    if(slideIndex == 0){
        slideIndex = slideIndex + 1;
    }

    if(slideIndex > myArray.length-1){
        slideIndex = 0;
        for (i = 0; i < myArray.length; i++) {
                 myArray[i].style.display = "none";
                }

        myArray[slideIndex].style.display = "block"; 

    }

    if(slideIndex<myArray.length){
        
       myArray[slideIndex].style.display = "block";
       console.log(slideIndex);
    }
        slideIndex++; 
});

prevbtn.addEventListener("click", function(){
});

Answer 3

谢谢您的回答，但我正在使用这个： myArray[slideIndex+1].style.display="block"; ，通过第一次单击跳转到下一张图片，否则您必须单击两次才能转到下一张图片。

我现在有这个代码，它似乎可以工作，只是我必须在页面加载时单击两次才能获取下一张图片。如何解决这个问题？

let slideIndex=0;

const prevbtn = document.querySelector(".prev");
const nextbtn = document.querySelector(".next");

let myArray = document.querySelectorAll("img");
let i = 0;

for (i = 0; i < myArray.length; i++) {
    myArray[i].style.display = "none";
}

myArray[slideIndex].style.display = "block";

nextbtn.addEventListener("click", function(){

    if(slideIndex > myArray.length-1){
        slideIndex = 0;
        for (i = 0; i < myArray.length; i++) {
             myArray[i].style.display = "none";
        }

        myArray[slideIndex].style.display = "block";       
    }

    myArray[slideIndex].style.display = "block";
    console.log(slideIndex);

    slideIndex++; 

});

prevbtn.addEventListener("click", function(){
});