Question

我尝试制作一个滑块，但我的 js 在第 91 行抛出了一个错误。它说它无法解析 style 属性，我不知道为什么。 images.children[i].style.transitionDuration = '0s';

错误信息如下所示：Uncaught TypeError: Cannot read property 'style' of undefined

我希望有人能帮助我:)

     <!DOCTYPE html>
     <html lang="en">
     <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
     body{
     margin: 0;
     padding: 0;
     width: 100vw;
     height: 100vh;
     overflow: hidden;
     }

    .view-port {
      margin: 0;
      padding: 0;
      width: 500px;
      height: 300px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      /*overflow: hidden;*/
      }

     .images-container {
     margin: 0;
     padding: 0;
     width: inherit;
     height: inherit;
     position: absolute;
     top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    }

   .card {
   margin: 0;
   padding: 0;
   width: inherit;
   height: inherit;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   overflow: hidden;
   }

   .card-img {
   max-width: 100%;
   max-height: 100%;
   position: relative;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   }
  </style>
  </head>
          <body>
          <div class="view-port">
    <div class="images-container">
        <div id="one" class="card">
            <img src="img\gallery/IMG_01.jpg" alt="" class="card-img">
        </div>
        
        <div id="two" class="card">
            <img src="img/gallery/IMG_02.jpg" alt="" class="card-img">
        </div>
        
        <div id="three" class="card">
            <img src="img/gallery/IMG_03.jpg" alt="" class="card-img">
        </div>
    </div>
</div>

<script>
    const   viewPort = document.querySelector('.view-port'),
            images = document.querySelector('.images-container'),
            cardWidth = parseFloat(getComputedStyle(images.children[0]).width),
            numberOfCardsByIndex = images.children.length - 1,
            middleCardByIndex = Math.floor(numberOfCardsByIndex / 2);
            
    function orderCards(){
        let counterRight = 1,
            counterLeft = middleCardByIndex;

        for (let i = 0; images.children.length; i++) {
            images.children[i].style.transitionDuration = '0s'; //HERE IS THE ERROR

            if (i < middleCardByIndex) {
                images.children[i].style.left = `-${(counterLeft * cardWidth) - (cardWidth / 2)}px`;
                counterLeft--;
            } else if (i > middleCardByIndex) {
                images.children[i].style.left = `${(counterRight * cardWidth) - (cardWidth / 2)}px`;
                counterRight++;
            } else {
                images.children[i].style.left =`${cardWidth / 2}px`;
            }
        }
    }
    
    orderCards();
</script>

杂耍错误：（未捕获的类型错误：无法读取未定义的属性“样式”）

0 个答案: