巧用数组制作图片切换js代码

在前面的文章中，我们讲到了js中数组的具体操作，详见（Js对Array的各种操作总结），这里就不再做详细的讲解。今天主要的目的是如何用数组进行图片的简单左右切换。

       本文中的图片切换具体步骤如下：
      第1步：简单的布局并设计基本的显示样式；
       第2步：通过js获取相关元素；
       第3步：通过数组进行图片url和对应文字描述的存储；
       第4步：初始化：包括图片的初始化，显示图片数字以及对应文字的初始化等；
       第5步：点击按钮切换图片，编写对应的函数，其实就是数组的简单应用。
       接下来先看看效果图，然后进行对应的代码讲解。

实现代码：

<！DOCTYPE html> 
<html lang="en"> <head><meta charset="UTF-8"><title>图片切换</title><style>.box{width: 600px;height:400px;border: 10px solid #ccc;position: relative;margin: 40px auto 0;}.box a{width: 30px;height: 30px;background-color: #000;border: 5px solid #fff;position: absolute;top:180px;text-align: center;font-size:25px;font-weight: bold;line-height: 30px;color:#fff;text-decoration: none;filter: alpha（opacity:40）;opacity: 0.4;}.box a:hover{filter:alpha（opacity:80）;opacity:0.8;}.box #prev{left: 10px;}.box #next{right: 10px;}#text,#num{height: 30px;line-height:30px;width: 600px;color:#fff;position: absolute;left: 0;background-color: #000;text-align: center;filter: alpha（opacity:80）;opacity: 0.8;margin:0;}.box #text{bottom: 0;}.box #num{top:0;}.box #img1{width: 600px;height: 400px;}</style><script>window.onload = function （） {var oPrev = document.getElementById（"prev"）;var oNext = document.getElementById（"next"）;var oText = document.getElementById（"text"）;var oNum = document.getElementById（"num"）;var oImg = document.getElementById（"img1"）; var arrUrl = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg"];var arrText = ["文字1","文字2","文字3","文字4"]; //初始化var num = 0;function fnTab（）{oNum.innerHTML = num + 1 + "/" + arrText.length;oImg.src = arrUrl[num];oText.innerHTML = arrText[num];};fnTab（）;oPrev.onclick = function（）{num --;if（ num == -1）{ num = arrUrl.length -1;}fnTab（）;};oNext.onclick = function（）{num ++;if（num == arrUrl.length）{ num = 0;}fnTab（）;};};</script> </head> <body><div class="box"><a id="prev" href="javascript:;"> < </a><a id="next" href="javascript:;"> > </a><p id="text">图片正在加载中……</p><span id="num">数量正在统计中……</span><img id="img1" src="../images/1.jpg" alt=""></div> </body> </html>

这个例子很简单，主要就是对数组的简单读写以及对html的属性内容读写操作。其中需要注意的是，当我们点击下一张到最后一张图片或者点击上一张到第一张时，需要设置具体的数值变化，不=否则会越界，那么图片、数字和对应的问题就没有内容。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。