我想在没有 jQuery 的情况下在 Javascript 中创建一个动态的 next img 函数-解网

问：

我正在尝试在 HTML 中显示图像。具有 2 个功能，用户可以单击下一张或上一张图片。下一个按钮一直工作，直到它到达中的最大数组并产生错误。这是控制台提供的。而上一个按钮根本不起作用。我尝试研究他们主要使用 jQuery 的解决方案（我还没有了解它，也完全不明白）。有没有其他方法可以限制下一个图像按钮，使其不会递增或递减通过数组？filePathnet::ERR_FILE_NOT_FOUNDfilePath

这是我的代码：

let filePath = ["img/frame/1.png", "img/frame/2.png", "img/frame/3.png", "img/frame/4.png", "img/frame/5.png", "img/frame/6.png", "img/frame/7.png", "img/frame/8.png", "img/frame/9.png"]

let imgResultEl = document.getElementById("img-result-el")
let prevBtnEl = document.getElementById("prev-btn-el")
let nextBtnEl = document.getElementById("next-btn-el")
let index = 0

let prevImg = () => {
  if (index >= filePath.length && index <= 0) {
    index--
    let newPath = filePath[index]
    imgResultEl.src = newPath
  }
}

let nextImg = () => {
  if (index <= filePath.length && index >= 0) {
    index++
    let newPath = filePath[index]
    imgResultEl.src = newPath
  }
}
prevBtnEl.addEventListener("click", prevImg)
nextBtnEl.addEventListener("click", nextImg)

javascript 数组图像 dom-events

let index = 0;
const navigateImg = (direction) => {
    index += direction;
    // Clamp index
    if (index < 0) index = 0;
    else if (index >= filePath.length) index = filePath.length - 1; // unless you want to wrap
    // Set the image source
    imgResultEl.src = filePath[index];
    // Update the button status
    prevBtnEl.disabled = index === 0;
    nextBtnEl.disabled = index >= filePath.length - 1;
};

// Initial button status
navigateImg(0);
prevBtnEl.addEventListener("click", () => navigateImg(-1));
nextBtnEl.addEventListener("click", () => navigateImg(1));

0赞 Raymond Sam Chia 9/28/2023 #2

用这个修复了它

let index = 0

let newSource = ()=>{
    if(filePath[index]==undefined){
        index = 0
    }
    let newPath = filePath[index]
    imgResultEl.src=newPath
}

let prevImg = () =>{
    index--
    newSource()
}

let nextImg = () =>{
    index++
    newSource()
}
prevBtnEl.addEventListener("click",prevImg)
nextBtnEl.addEventListener("click",nextImg)

我想在没有 jQuery 的情况下在 Javascript 中创建一个动态的 next img 函数

I want to create a dynamic next img function in Javascript without jQuery

评论

评论