在前一篇文章中，我们讨论了js中Array的具体操作。详见(Js对数组各种操作的总结)，这里就不详细解释了。今天的主要目的是如何使用数组在左右图片之间切换。

本文中画面切换的具体步骤如下：

第一步：简单布局，设计基本展示风格；第二步：通过js获取相关元素；第三步：通过数组存储图片url和对应的文本描述；第四步：初始化：包括图片的初始化、图片号的显示和对应字符的初始化；第五步：点击按钮切换图片，写相应的函数，其实就是数组的一个简单应用。接下来先看渲染，然后解释相应的代码。

实现代码：

！doctype html lang=' en ' head meta charset=' utf-8 ' title图片切换/title style . box { width : 600 px；高度：400 px；border: 10px固体# ccc相对位置：margin: 40px自动0；} .盒子a { width: 30pxheight: 30px背景色： # 000；border: 5px实心# fff绝对位置：top:180px文本对齐：中心；font-size :25 px；font-weight:粗体；线高： 30px；color: # fff文本装饰：无；filter : alpha(opa city 336040)；opacity: 0.4} .box a : hover { filter : alpha(opa city 336080)；opacity:0.8} .box # prev { left: 10px} .方框# next { right: 10px} #text，# num { height: 30px线高：30 px；宽度： 600 px；color: # fff绝对位置：left : 0；背景色： # 000；文本对齐：中心；filter : alpha(opa city 336080)；opacity: 0.8margin:0} .box # text { bottom : 0；} .box # num { top:0} .方框# img1 { width: 600px高度： 400 px；}/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(' img 1 ')；var arrUrl=['images/1.jpg '，' images/2.jpg '，' images/3.jpg '，' images/4 . jpg ']；Var arrText=['文本1 '，'文本2 '，'文本3 '，'文本4 ']；//初始化var num=0；函数fnTab(){ onum . innerhtml=num 1 '/arrtext . length；oimg . src=ArrURl[num]；otext . innerhtml=arr text[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=' img 1 ' src=' http :/images/1 . jpg ' alt=' '/div/body/html这个例子很简单，主要指数组的简单读写。需要注意的是，当我们点击上一张图片旁边的下一张图片或者点击上一张图片旁边的第一张图片时，需要设置具体的数值变化，否则就会出界，那么图片、数字以及对应的问题就没有内容了。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。