数组的操作与应用
数组的定义
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="data:image/1.jpg" alt=""/>
</div> </body>
</html>
运行效果截图：
