时间戳

首页 > 解决方案 > 图像滑块需要额外单击 1 次才能重置。无法修复

javascript - 图像滑块需要额外单击 1 次才能重置。无法修复

问题描述

在过去的 1 小时里，我试图解决这个问题，但没有成功。基本上，一旦我到达“imageB”，我必须在图像重置回“imageA”之前多点击 1 次。我不明白为什么会这样。任何帮助将不胜感激：

HTML:

<body>
    <div class="main-container">
      <div class="image-div">
        <img width="500px" id="image-holder" src="images/imageA.jpeg" alt="" />
      </div>
      <button onclick="nextImage()">Next</button>
    </div>
    <script src="index.js"></script>
  </body>

JS:

let imageHolder = document.getElementById("image-holder");

let images = ["images/imageA.jpeg", "images/imageB.jpeg"];
let i = 1;

function nextImage() {
  if (i < images.length) {
    imageHolder.setAttribute("src", images[i]);
    i++;
  } else {
    i = 0;
  }
}

标签： javascript

解决方案

我制作了一个可以解决您的问题的代码，但我认为它有点长，也许您可​​以找到比我更短的代码更具可读性，无论如何这是我的解决方案，它适用于我：

每次单击按钮时，该函数都会给出数组中的下一项（下一个源），但如果该项在数组的末尾，他会从数组中的第一项重新开始。

   <div class="main-container">
    <div class="image-div">
     <img width="500px" id="image-holder" src="./img1.png" alt="" />
    </div>
    <button onclick="nextImage()">Next</button>
   </div>

    let imageHolder = document.getElementById("image-holder");

    let images = ["./img1.png", "./oz.png","./img2.png"];

    function nextImage() {
      let getSrcAttr = imageHolder.getAttribute("src");
      let newSrc = 
      imageHolder.setAttribute("src",images[(images.indexOf(getSrcAttr))+1]);
      if(images.indexOf(getSrcAttr) == (images.length)-1){
         newSrc = imageHolder.setAttribute("src",images[0]);
      }
    }

推荐阅读