数组的操作与应用
数组的定义
var 数组名=new Array(); //创建空数组
var 数组名=new Array(size);//创建指定数组长度的数组
var 数组名=new Array(值1；值2；...)//用指定的几个元素创建数组
数组操作常用方法
数组名.length 获取数组的长度
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个新的数组元素，返回新的数组长度
sort() 对数组元素进行排序
思路：
第1步：简单的布局并设计基本的显示样式；
第2步：通过js获取相关元素；
第3步： 通过数组进行图片url和对应文字描述的存储；
第4步：初始化：包括图片的初始化，显示图片数字以及对应文字的初始化等；
第5步：点击按钮切换图片，编写对应的函数，其实就是数组的简单应用。
接下来先看看效果图，然后进行对应的代码讲解。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ width: 833px; height:500px; 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:220px; text-align: center; font-size:25px; font-weight: bold; line-height: 30px; color:#fff; text-decoration: none; opacity: 0.4; } .box a:hover{ opacity:0.8; } .box #prev{ left: 10px; } .box #next{ right: 10px; } </style> <script > window.onload=function(){ var oprev=document.getElementById('prev'); var onext=document.getElementById('next'); var oimg=document.getElementById('img'); var arr=new Array(); arr[0]='image/1.jpg'; arr[1]='image/2.jpg'; arr[2]='image/3.jpg'; var index=0; //alert('111');
//鼠标单击事件 onext.onclick=function(){ index++; oimg.src=arr[index]; //alert(arr[index]); if(index==arr.length-1){ index=0; } } //鼠标单击事件 oprev.onclick=function(){ oimg.src=arr[index]; index--; if (index==-1) { index=arr.length-1; } } } </script> </head> <body> <div class="box"> <a id="prev" href="javascript:;"> < </a> <a id="next" href="javascript:;"> > </a> <img id="img" src="image/1.jpg" alt=""/> </div> </body> </html>
运行效果截图：
