在本节教程，我们将使用图片切换这个实用的案例来演示数组的应用。在该示例中，我们将图片切换需用到的各个图片的路径存在数组中，在切换图片时使用数组和下标来引用对应的图片。另外，我们还应用了数组的 length 属性来获取当前显示的图片在数组中的第几张。
图 1：运行的初始状态
图 2：单击向后链接切换到最后一张图片
图 3：换到最后一张图片时再单击向后链接
图 4：切换到第一张图片时再单击向前链接
【例 1】数组在图片切换中的应用。
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>数组在图片切换中的应用</title>
<style>
#content{
width:400px;
height:400px;
border:10px solid #ccc;
margin:40px auto 0;
position:relative;
background:#f1f1f1;
}
#content a{
width:40px;
height:40px;
border:5px solid #ccc;
position:absolute;
top:175px; /*链接与图片垂直居中*/
text-align:center;
text-decoration:none;
line-height:40px;
color:#fff;
font-size:30px;
font-weight:bold;
background:#000;
filter:alpha(opacity:50);/*设置向前向后链接的背景为半透明*/
opacity:0.5;
}
#content a:hover{/*鼠标指针移到向前或向后链接上时背景透明度降低*/
filter:alpha(opacity:90);
opacity:0.9;
}
#prev{left:-80px;}
#next{right:-80px;}
#text,#span1{
position:absolute;
left:0;
width:400px;
height:30px;
line-height:30px;
text-align:center;
color:#fff;
background:#000;
filter:alpha(opacity:60);/*设置透明的背景*/
opacity:0.6;
}
#text{/*图片张数显示在左下方*/
margin:0;
bottom:0;
}
#span1{top:0;}/*图片张数显示在左下方*/
#img1{
width:400px;
height:400px;
}
</style>
<script>
window.onload = function(){
var oPrev = document.getElementById("prev");
var oNext = document.getElementById("next");
var oText = document.getElementById("text");
var oSpan = document.getElementById("span1");
var oImg = document.getElementById("img1");
//使用数组存储切换的图片路径
var imgUrl=['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg'];
//使用数组存储图片描述信息
var imgText = ['可爱的小猫咪','调皮的皮卡丘','呆萌的皮卡丘','超酷的小熊'];
var num = 0;
//初始化图片信息
oImg.src = imgUrl[num];
oText.innerHTML = imgText[num];
oSpan.innerHTML = num+1 + '/' + imgUrl.length;
//单击向前链接事件
oPrev.onclick = function(){
num--;
if(num == -1){//显示第一张图片后再单击向前按钮时将保持显示第一张图片
num = 0;
alert("这是第一张图片");
}
oImg.src = imgUrl[num];
oText.innerHTML = imgText[num];
oSpan.innerHTML = num+1 + '/' + imgUrl.length;
}
//单击向后链接事件
oNext.onclick = function(){
num++
//显示最后一张图片后再单击向后链接时将保持显示最后一张图片
if(num == imgUrl.length){
num = imgUrl.length-1;
alert("这是最后一张图片");
}
oImg.src = imgUrl[num];
oText.innerHTML = imgText[num];
oSpan.innerHTML = num+1 + '/' + imgUrl.length;
}
}
</script>
<body>
<div id="content">
<img id = "img1"/>
<a id="prev" href="javascript:;"><</a>
<a id="next" href="javascript:;">></a>
<p id="text"></p>
<span id="span1"><span>
</div>
</body>
</html>
上述代码运行后首先显示数组中的第一个元素指定的图片，当连续单击向后链接时，图片会按图片数组中指定的顺序依次切换图片，切换到最后一张图片后再单击向后链接时图片停止切换，并弹出提示对话框；当连续单击向前链接时，会在当前图片的基础上，按数组元素的逆序依次切换图片，切换到第一张图片后再单击向前链接时图片停止切换，并弹出提示对话框。
代码在 Chrome 浏览器中的运行结果如图 1～图 4 所示。
图 1：运行的初始状态
图 2：单击向后链接切换到最后一张图片
图 3：换到最后一张图片时再单击向后链接
图 4：切换到第一张图片时再单击向前链接
从示例 1 可以看到，使用数组来存储图片切换中所涉及的各个图片的路径，可以很容易地实现任意多个图片之间切换。
虽然例 1 中的代码实现了图片切换功能，但当我们阅读代码时，我们会发现 oImg.src=imgUrl[num]、oSpan.innerHTML=num+1+'/'+imgUrl.length 以及 oText.innerHTML=imgText[num] 这 3 行代码重复出现了 3 次。
同样的代码重复出现，不仅会给今后的维护带来麻烦，还会增大文件，增加文件加载时间从而影响性能，所以对于例 1，我们有必要改进它。对示例 1 代码的改进主要是通过使用之后介绍的函数，我们可以把相同的代码抽取出来封装到一个函数中，然后在需要使用的地方调用这个函数就可以了。
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/23957.html