时间戳

首页 > 解决方案 > 未捕获的类型错误：无法读取图像滑块未定义的属性“样式”

javascript - 未捕获的类型错误：无法读取图像滑块未定义的属性“样式”

问题描述

我正在制作一个简单的图像滑块，您单击它会移动到下一个图像。这是通过在点击时更改图像的 z-index 来完成的。出于某种原因，现在我已经将它加载到我的托管站点中，我在 Google Chrome 控制台上收到错误：“未捕获的类型错误：无法读取未定义的属性'样式'”。

该错误具体发生在倒数第二行：“z=images[currentSlide].style.zIndex” 知道如何解决这个问题吗？

以下是相关的 HTML 和 JS：

<section class="fixed-container wrap">

  <div class="logo-bg">
    </div>
    
    <div class="slider">
        <img src="https://upload.wikimedia.org/wikipedia/commons/e/e5/Golden_rectangle.png">
        <img src="https://i0.wp.com/mathblog.wpengine.com/wp-content/uploads/2017/03/image005.gif?zoom=2.625&resize=364%2C222&ssl=1">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Rectangle_example.svg/1024px-Rectangle_example.svg.png">
    </div>
</section>

<!--tags-->
const slideArea = document.querySelector("div.slider")
const images = slideArea.querySelectorAll("img")

<!--we want to keep track of two things-->
let currentSlide = 0
let z = 1

<!--when I click the slide area I want to change the slide based on the z-index-->
wrap.addEventListener('click', function(e){

const width = +getComputedStyle(document.body).width.slice(0, -2) / 2;

if (e.pageX <= width){
    currentSlide = currentSlide - 1
    if(currentSlide < 0){
    currentSlide = images.length
}
    z= z + 1} 
else{
        currentSlide = currentSlide + 1
        if(currentSlide > images.length - 1){
        currentSlide = 0
    }
        z=z + 1}


<!--remove animation from the style for every image-->
images.forEach(image =>{
image.style.animation=""
})

z=images[currentSlide].style.zIndex
images[currentSlide].style.animation="fade .5s"
})

标签： javascripthtmlcss

解决方案

问题很可能来自currentSlide = images.length.

索引从零开始，因此images[images.length]将是未定义的。最后一个索引比长度小一。

尝试更改为：

currentSlide = images.length - 1;

推荐阅读