Javascript 为什么我的slider脚本中有些元素没有定义?

Javascript 为什么我的slider脚本中有些元素没有定义?,javascript,Javascript,我正在为JavaScript创建一个图像滑块。我有它,以便我的左箭头和右箭头显示下一个图像。我想添加一个setInterval方法,每隔几秒钟就更改一次显示图像。我假设这就像每3秒钟调用一次函数来单击正确的图像一样简单。但是我有一个错误,说 index.js:26 Uncaught TypeError: Cannot read property 'style' of undefined at slideRight (index.js:26) 这是我的密码 let sliderImage

我正在为JavaScript创建一个图像滑块。我有它,以便我的左箭头和右箭头显示下一个图像。我想添加一个setInterval方法,每隔几秒钟就更改一次显示图像。我假设这就像每3秒钟调用一次函数来单击正确的图像一样简单。但是我有一个错误,说

index.js:26 Uncaught TypeError: Cannot read property 'style' of undefined
    at slideRight (index.js:26)
这是我的密码

let sliderImages = document.querySelectorAll('.slide');
let arrowLeft = document.getElementById('arrow-left');
let arrowRight = document.getElementById('arrow-right');
let current = 0;

function reset() {
    for(let i = 0; i < sliderImages.length; i++) {
        sliderImages[i].style.display = 'none';
    }
}

function startSlider() {
    reset();
    sliderImages[0].style.display = 'block';
}

function slideLeft() {
    reset();
    sliderImages[current - 1].style.display = 'block';
    current --;
}


function slideRight() {
    reset();
    sliderImages[current + 1].style.display = 'block';
    console.log(current);
    current ++;
    console.log(current);
}

arrowLeft.addEventListener('click', function() {
    reset()
    if(current == 0) {
        current = sliderImages.length;
    }
    slideLeft();
});

arrowRight.addEventListener('click', function () {
    if(current == sliderImages.length -1 ) {
        current = -1;
    }

    slideRight();
})
startSlider();

setInterval(slideRight, 3000);
let sliderImages=document.querySelectorAll('.slide');
设arrowLeft=document.getElementById('arrow-left');
设arrowRight=document.getElementById('arrow-right');
设电流=0;
函数重置(){
for(设i=0;i
在我看来,您的问题是,当您向右走得太远时,数组中不再存在索引,因此向右走时需要使用模运算符:

sliderImages[(current + 1) % sliderImages.length].style.display = 'block';
如果向左走得太远,你需要绕到右边:

sliderImages[current - 1 >= 0 ? 
    current - 1 : sliderImages.length - 1].style.display = 'block';

在我看来,您的问题是,当您向右走得太远时,数组中不再存在索引,因此向右走时需要使用模运算符:

sliderImages[(current + 1) % sliderImages.length].style.display = 'block';
如果向左走得太远,你需要绕到右边:

sliderImages[current - 1 >= 0 ? 
    current - 1 : sliderImages.length - 1].style.display = 'block';

问题出在
幻灯片图像[当前+1]

当您到达最新图像时,
current+1
是一个越界索引,幻灯片图像中的coo响应项返回
null

您可能需要检查以下内容:

if (current < sliderImages.length) {
  sliderImages[current + 1].style.display = 'block';
  current++;
}
if(当前
问题出在
幻灯片图像[当前+1]

当您到达最新图像时,
current+1
是一个越界索引,幻灯片图像中的coo响应项返回
null

您可能需要检查以下内容:

if (current < sliderImages.length) {
  sliderImages[current + 1].style.display = 'block';
  current++;
}
if(当前
仅供参考:
setInterval()
不是JavaScript的一部分。它是
窗口
API的一部分。仅供参考:
setInterval()
不是JavaScript的一部分。这是代码>窗口 API的一部分。谢谢你这么做了,我也考虑了沃克斯所说的。我必须用括号括起当前的+1。谢谢大家,我会在3分钟内接受这个答案。谢谢你的帮助,我也考虑了沃克斯所说的话。我必须用括号括起当前的+1。谢谢各位,我会在3分钟内接受这个答案。