想要一个反向按钮为我的图像数组使用JavaScript

Want a reverse button for my image Array using JavaScript

本文关键字：图像 我的 数组 JavaScript 按钮 一个      更新时间：2023-09-26

你好，我刚刚创建了以下JavaScript代码的下一个按钮，当点击将显示下一个图像在我的数组。然而，我现在想通过创建一个"上一个"按钮的新函数来扭转这一点，该按钮向下返回数组而不是向前。这将会有更多的图片，而不仅仅是你在这个数组中看到的3个例子:

var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = "Media//Gallery//img_1.jpg";
imgArray[1] = new Image();
imgArray[1].src = "Media//Gallery//img_2.jpg";
imgArray[2] = new Image();
imgArray[2].src = "Media//Gallery//img_3.jpg";

这是我的Next按钮功能。我只需要反转它的上一个按钮，但不确定如何。

function nextImage(event) {
    var img = document.getElementById("largeImage");
    for(var i = 0; i < imgArray.length;i++)
    {
        if(imgArray[i].src == img.src)
        {
            if(i === imgArray.length){
                img.src = imgArray[0].src;
                break;
            }
            img.src = imgArray[i+1].src;
            break;
        }
    }
}

这是前一个按钮的div:

<div class="imgNav" onclick="previousImage(this);" style="width:190px">

这是当你按下按钮时我想改变的图像:

<img id="largeImage" src="Media//Gallery//Image_1.jpg" alt="Large Image" />

提前谢谢你!

应该可以了

JavaScript 

    currentIndex = 0;
    function changeImage(direction)
    {
        var index = currentIndex + direction;
       if (index < 0)
       {
           index = 0; // or use imgArray.length to rotate round
       }
       if (index > imgArray.length)
       {
           index = imgArray.length; // or use 0 to rotate round
       }
       document.getElementById('largeImage').src = imgArray[index].src;
       currentIndex = index;
    }

Html代码

<div class="imgNav" onclick="changeImage(-1)" style="width:190px">
<div class="OtherimgNav" onclick="changeImage(1)" style="width:190px">

相关文章：