首页 > 编程笔记 > JavaScript笔记

JS数组实现图片切换

在本节教程，我们将使用图片切换这个实用的案例来演示数组的应用。在该示例中，我们将图片切换需用到的各个图片的路径存在数组中，在切换图片时使用数组和下标来引用对应的图片。另外，我们还应用了数组的 length 属性来获取当前显示的图片在数组中的第几张。

【例 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:;">&lt;</a>
     <a id="next" href="javascript:;">&gt;</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 代码的改进主要是通过使用之后介绍的函数，我们可以把相同的代码抽取出来封装到一个函数中，然后在需要使用的地方调用这个函数就可以了。

JS数组实现图片切换

所有教程

优秀文章