Javascript “下一步”按钮在到达库阵列的末尾之前停止导航

我有一个网站，我正在为我工作的建筑公司建设。这个网站的主要目的是展示我们已经完成的工作的图片。我有JavaScript代码，可以显示隐藏的图像库，并使用next/previous按钮隐藏以前的图像库。“下一步”按钮用于从第一个库移动到第二个库，但不会从第二个库移动到第三个库，依此类推。知道为什么会这样吗

我已将currentIndex变量更改为全局变量，以避免每次单击next按钮时在第一个位置启动数组。现在，当我单击“下一步”按钮时，不会显示缩略图

以下是更新的JavaScript代码：

window.onload = showImage(imgName);
var currentIndex = 0;

function showImage(imgName) 
{
    var largeImg = document.getElementById("large");
    var thePath = "images/";
    var theSource = thePath + imgName;

    largeImg.src = theSource;
    largeImg.alt = imgName;

}


function nextGall()
{
    var gallery = new Array();
    gallery = document.getElementsByClassName("gall");

    if(currentIndex > gallery.length)
    {
        currentIndex = gallery.length;
        document.getElementById("next").src = "images/nextEnd.jpg";
    }

    if (currentIndex > 0)
    {
        document.getElementById("previous").src = "images/previous.jpg";
    }

    currentIndex += 1;

    for (var x = 0; x < gallery.length; x++)
    {
        gallery[x].style.display = "none";
    }

    gallery[currentIndex].style.display = "block";
    return false;
}

function prevGall()
{
    var gallery = new Array();
    gallery = document.getElementsByClassName("gall");

    if(currentIndex <= 0)
    {
        currentIndex = 0;
        document.getElementById("previous").src = "images/previousEnd.jpg";
    }

    if(currentIndex < gallery.length)
    {
        document.getElementById("next").src = "images/next.jpg";
    }

    currentIndex -= 1;
    for (var x = 0; x < gallery.length; x++)
    {
        gallery[x].style.display = "none";
    }

    gallery[currentIndex].style.display = "block";
    return false;   
}

window.onload=showImage（imgName）；
var currentIndex=0；
函数showImage（imgName）
{
var largeImg=document.getElementById（“大”）；
var thePath=“images/”；
var theSource=路径+imgName；
largeImg.src=源；
largeImg.alt=imgName；
}
函数nextGall（）
{
var gallery=新数组（）；
gallery=document.getElementsByClassName（“gall”）；
如果（currentIndex>gallery.length）
{
currentIndex=gallery.length；
document.getElementById（“next”）.src=“images/nextEnd.jpg”；
}
如果（当前索引>0）
{
document.getElementById（“previous”）.src=“images/previous.jpg”；
}
currentIndex+=1；
对于（变量x=0；x
<script type="text/javascript">

window.onload = showImage(imgName);
var currentIndex = 0,
    gallery = new Array(); 
    gallery = document.getElementsByClassName("gall"); // unless you're going to load galleries by AJAX, you do not need to count how many galleries are there every time lanuching a function

function showImage(imgName) 
{
    var largeImg = document.getElementById("large");
    var thePath = "images/";
    var theSource = thePath + imgName;

    largeImg.src = theSource;
    largeImg.alt = imgName;
}


function nextGall()
{
    var nextGalleryIndex = currentIndex + 1;

    if(nextGalleryIndex > gallery.length)
    {
        currentIndex = gallery.length; //if we reached the end of gallery, then it will always stay on LAST gallery index
    }
    else if(nextGalleryIndex < gallery.length)
    {
      for (var x = 0; x < gallery.length; x++)
      {
          gallery[x].style.display = "none";
      }
      gallery[nextGalleryIndex].style.display = "block";
      currentIndex = nextGalleryIndex;
    }
}
</script>


window.onload=showImage（imgName）；
var currentIndex=0，
gallery=新数组（）；
gallery=document.getElementsByClassName（“gall”）；//除非您打算通过AJAX加载库，否则不需要计算每次运行函数时有多少库
函数showImage（imgName）
{
var largeImg=document.getElementById（“大”）；
var thePath=“images/”；
var theSource=路径+imgName；
largeImg.src=源；
largeImg.alt=imgName；
}
函数nextGall（）
{
var nextGalleryIndex=currentIndex+1；
if（下一个画廊索引>画廊长度）
{
currentIndex=gallery.length；//如果我们到达gallery的末尾，那么它将始终停留在最后一个gallery索引上
}
否则如果（下一个画廊索引<画廊长度）
{
对于（变量x=0；x
现在它根本没有改变图库。我只是不明白为什么我的代码会在页面加载时从显示的图库移动到下一个图像库，但不会继续导航到第三个、第四个、第五个等等。我仔细检查了代码-我提供的代码有效：）-如果有问题，请注释掉函数showImage（）。解决方案的问题在于每次调用nextGall（）时函数将当前库设置为0，然后添加一个，这意味着当前库在函数中始终为1。我已将其复制并粘贴到我的文件中。该页面将不会在图像库中导航。我将currentIndex和GALLERY变量从全局移动到局部（移动到NextAll（））我也遇到了同样的问题。导航在第二个图像库之后停止。再一次，我弄不明白为什么它会停在这里。我是否忽略了HTML代码中的某些内容？好的，我明白你的意思，每次我点击“下一步”按钮时，都会将当前库设置为0。为什么我的代码无法识别全局变量al变量？当我将它们设置为全局变量时，“下一步”按钮根本无法导航。我需要查看您是如何编辑您现在拥有的代码的，以进一步解释，如果全局变量无法识别，则表示它们未正确初始化（例如，在加载库之前初始化它们）
<script type="text/javascript">

window.onload = showImage(imgName);
var currentIndex = 0,
    gallery = new Array(); 
    gallery = document.getElementsByClassName("gall"); // unless you're going to load galleries by AJAX, you do not need to count how many galleries are there every time lanuching a function

function showImage(imgName) 
{
    var largeImg = document.getElementById("large");
    var thePath = "images/";
    var theSource = thePath + imgName;

    largeImg.src = theSource;
    largeImg.alt = imgName;
}


function nextGall()
{
    var nextGalleryIndex = currentIndex + 1;

    if(nextGalleryIndex > gallery.length)
    {
        currentIndex = gallery.length; //if we reached the end of gallery, then it will always stay on LAST gallery index
    }
    else if(nextGalleryIndex < gallery.length)
    {
      for (var x = 0; x < gallery.length; x++)
      {
          gallery[x].style.display = "none";
      }
      gallery[nextGalleryIndex].style.display = "block";
      currentIndex = nextGalleryIndex;
    }
}
</script>