“下一步”按钮在到达库数组的末尾之前停止导航
Next button stops navigating before reaching end of gallery array
我为我工作的建筑公司建立了一个网站。这个网站的主要目的是展示我们已经完成的工作的图像。我有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>
试试这个：
<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>
相关文章：
- 如何禁用在Bootstrap中不完成一步就转到下一步
- 将“下一步”和“上一个”按钮添加到较大的图像
- 引导表单向导 - 防止在提交 ajax 响应的每个页面表单出现错误时滚动到下一步
- 如何创建一个“下一步”按钮，使用 Java 脚本和 Twitter Bootstrap 切换选项卡
- 如何在单击下一步时使文本移动/更改
- 您如何控制在填写表单时单击下一步时 iOS/Android 将关注哪个字段
- 下一页导航
- Jquery UI选项卡-根据输入字段值，使用“下一步”/“上一步”按钮推进选项卡
- Jquery选项卡单击时高亮显示'下一步'按钮
- 如何解析用户对象以返回屏幕名称并继续下一步操作
- 如何点击谷歌饼图进入下一步行动
- 转到下一步时更改输入值
- 尝试在JavaScript中制作下一步按钮以显示JSON数组
- 跳转到 CasperJS 中步骤超时的下一步
- 如何在 UI 引导分页中禁用下一步按钮
- 等待几秒钟，然后再运行下一步量角器
- 如何在textField上使用zIndex，这样当我在Titanium中按下一步时，我可以移动到其他textField
- 到达最后一个元素时隐藏下一步按钮
- PHP 脚本:显示文件夹中的图像，并带有限制和<下一步>导航
- “下一步”按钮在到达库数组的末尾之前停止导航
