我有一个我为我工作的建筑公司建造的网站。本网站的主要目的是展示我们已完成的工作图像。我有JavaScript代码，应该显示隐藏的图像库，并使用下一个/上一个按钮隐藏以前的画廊。下一个按钮用于从第一个图库移动到第二个图库，但不会从第二个图库移动到第三个图库，依此类推。知道为什么会这样吗？
我已将currentIndex变量更改为全局变量，以便在每次单击下一个按钮时消除在第一个位置启动数组。现在，当我单击下一个按钮时，没有显示的缩略图图像。
以下是更新的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;
}
以下是HTML代码的一小部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Stamped</title>
<link type="text/css" rel="stylesheet" href="kc.css" />
<script type="text/javascript" src="concrete.js"></script>
</head>
<body>
<div id="page">
<div id="links">
<a href="kcweb.htm" class="menu">Home</a>
<a href="about.htm" class="menu">About Us</a>
<a href="contact.htm" class="menu">Contact Us</a>
<a href="photos.htm" class="menu">Photos</a>
</div>
<div id="sign">
<p><span>Klopstein Concrete</span><br />
Everything Concrete...</p>
</div>
<div id="sidebar">
<ul>
<li><a href="https://www.facebook.com/pages/Klopstein-Concrete/256257947822?ref=hl"><img src="images/facebook.jpg" height="75" width="150" alt="facebook" class="sideLink"/></a></li>
<li><a href="http://www.bbb.org/stlouis/business-reviews/concrete-contractors/klopstein-concrete-in-foley-mo-310436248#reasonrating"><img src="images/betterbusiness.jpg" height="75" width="150" alt="better business bureau" class="sideLink" /></a></li>
</ul>
</div>
<div id="main">
<h1>Stamped Concrete</h1>
<div id="bigOne">
<a href="#"><img id="large" src="images/Vince1.jpg" height="350" width="350" alt="Vince1.jpg" onclick="largePic(this);"/></a>
</div>
<div id="list">
<h1 id="Gallery">Galleries</h1>
<ul>
<li class="gallery"><a href="stamp.htm">Stamped Concrete</a></li>
<li class="gallery"><a href="exposed.htm">Exposed Aggregate</a></li>
<li class="gallery"><a href="stain.htm">Stained Concrete</a></li>
<li class="gallery"><a href="driveway.htm">Driveway/Walkway</a></li>
<li class="gallery"><a href="walls.htm">Walls</a></li>
<li class="gallery"><a href="countertop.htm">Countertops</a></li>
<li class="gallery"><a href="commercial.htm">Commercial</a></li>
</ul>
</div>
<div id="thumbs">
<div id="gall1" class="gall">
<img src="images/Vince1.jpg" height="50" width="50" alt="Vince1.jpg" onmouseover="showImage('Vince1.jpg');"/>
<img src="images/Vince2.jpg" height="50" width="50" alt="Vince2.jpg" onmouseover="showImage('Vince2.jpg');"/>
<img src="images/Vince3.jpg" height="50" width="50" alt="Vince3.jpg" onmouseover="showImage('Vince3.jpg');"/>
<img src="images/Vince4.jpg" height="50" width="50" alt="Vince4.jpg" onmouseover="showImage('Vince4.jpg');"/>
<img src="images/Vince5.jpg" height="50" width="50" alt="Vince5.jpg" onmouseover="showImage('Vince5.jpg');"/>
<img src="images/Vince6.jpg" height="50" width="50" alt="Vince6.jpg" onmouseover="showImage('Vince6.jpg');"/>
</div>
<div id="gall2" class="gall">
<img src="images/Martin1.jpg" height="50" width="50" alt="Martin1.jpg" onmouseover="showImage('Martin1.jpg');"/>
<img src="images/Martin2.jpg" height="50" width="50" alt="Martin2.jpg" onmouseover="showImage('Martin2.jpg');"/>
<img src="images/Martin3.jpg" height="50" width="50" alt="Martin3.jpg" onmouseover="showImage('Martin3.jpg');"/>
<img src="images/Martin4.jpg" height="50" width="50" alt="Martin4.jpg" onmouseover="showImage('Martin4.jpg');"/>
<img src="images/Martin5.jpg" height="50" width="50" alt="Martin5.jpg" onmouseover="showImage('Martin5.jpg');"/>
<img src="images/zach.jpg" height="50" width="50" alt="zach.jpg" onmouseover="showImage('zach.jpg');"/>
</div>
<div id="gall3" class="gall">
<img src="images/arch1.jpg" height="50" width="50" alt="arch1.jpg" onmouseover="showImage('arch1.jpg');"/>
<img src="images/arch2.jpg" height="50" width="50" alt="arch2.jpg" onmouseover="showImage('arch2.jpg');"/>
<img src="images/arch3.jpg" height="50" width="50" alt="arch3.jpg" onmouseover="showImage('arch3.jpg');"/>
<img src="images/arch4.jpg" height="50" width="50" alt="arch1.jpg" onmouseover="showImage('arch4.jpg');"/>
<img src="images/collin1.jpg" height="50" width="50" alt="collin1.jpg" onmouseover="showImage('collin1.jpg');"/>
<img src="images/collin2.jpg" height="50" width="50" alt="collin2.jpg" onmouseover="showImage('collin2.jpg');"/>
</div>
<div id="gall4" class="gall">
<img src="images/anderson1.jpg" height="50" width="50" alt="anderson1.jpg" onmouseover="showImage('anderson1.jpg');"/>
<img src="images/anderson2.jpg" height="50" width="50" alt="anderson2.jpg" onmouseover="showImage('anderson2.jpg');"/>
<img src="images/anderson3.jpg" height="50" width="50" alt="anderson3.jpg" onmouseover="showImage('anderson3.jpg');"/>
<img src="images/anderson4.jpg" height="50" width="50" alt="anderson4.jpg" onmouseover="showImage('anderson4.jpg');"/>
<img src="images/anderson5.jpg" height="50" width="50" alt="anderson5.jpg" onmouseover="showImage('anderson5.jpg');"/>
<img src="images/anderson6.jpg" height="50" width="50" alt="anderson6.jpg" onmouseover="showImage('anderson6.jpg');"/>
</div>
<div id="navigate">
<img id="previous" src="images/previous.jpg" height="50" width="50" alt="previous" onclick="return prevGall();"/>
<img id="next" src="images/next.jpg" height="50" width="50" alt="next" onclick="return nextGall();"/>
</div>
答案 0 :(得分：0)
试试这个：
<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>