Question

我正在为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);

Answer 1

在我看来你的问题是当你走得太远时，数组中的索引不再存在，所以你需要在向右走时使用模数运算符：

sliderImages[(current + 1) % sliderImages.length].style.display = 'block';

当你走得太远时，你需要绕到右侧：

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

Answer 2

问题出在sliderImages[current + 1]。

当您到达最新图像时，current + 1是一个超出范围的索引，并且sliderImages中的相应条目返回null。

您可能需要查看类似

的内容

if (current < sliderImages.length) {
  sliderImages[current + 1].style.display = 'block';
  current++;
}

为什么滑块脚本中的某些元素未定义？

2 个答案: