任务视频V2.0
任务视频V1.0
知识点
数组的创建
1.创建数组
在JavaScript有多种方式创建数组，可以使用构造函数创建，也可以直接使用方括号创建，具体有以下几种创建方法：
（1）使用无参构造函数，创建一空数组
var arr=new Array();
（2）一个数字参数构造函数，指定数组长度
var arr=new Array(5);
表示创建一个长度为5的数组，由于数组长度可以动态调整，作用并不大。
（3）带有初始化数据的构造函数，创建数组并初始化参数数据
var arr=new Array(“HTML”,”JavaScript”,”DOM”);
（4）使用方括号，创建空数组，等同于调用无参构造函数
var arr=[];
（5）使用中括号，并传入初始化数据，等同于调用调用带有初始化数据的构造函数
var arr=[“HTML”,”JavaScript”,”DOM”];
2.为数组元素赋值
在声明数组时可以直接为数组元素赋值，如前面创建数组中的（3）和（5），也可以分别为数组元素赋值，例如：
var colors=new Array(4); //创建长度为3的空数组
colors[0]="red"; //为数组第一个元素赋值
colors[1]="yellow"; //为数组第二个元素赋值
colors[2]="blue"; //为数组第三个元素赋值
colors[3]="green"; //为数组第四个元素赋值
在JavaScript中，可以将不同数据类型的值存放在一个数组中，例如：
var person =["张平",20,"男"];
数组的访问
通过数组的名称和下标直接访问数组元素，访问数组的语法格式如下：
数组名[下标];
数组的常用属性和方法
| 名称 | 描述 |
| length | 数组的属性，返回数组长度 |
| reverse() | 反转数组。返回反转后的数组，原数组的值也会反转 |
| join() | 用括号内的符号将数组中的所有元素连起来 |
| sort() | 进行升序排序 |
| concat(a1) | 连接数组，将括号中的a1接在数组后面，可以连接多个数组 |
| push( ) | 在尾部插入 |
| pop( ) | 在尾部删除 |
| unshift( ) | 在头部插入 |
| shift( ) | 在头部删除 |
| splice(start,deletcount,插入删除项 ) | 插入或删除项 |
| slice(start,end ) | 提取数组中的一部分，不会影响原数组 |
制作简单焦点图效果
任务描述
焦点图效果是各大网站常用的效果，下面利用数组实现简单的焦点图效果，页面上5张图片2秒轮换显示，单击向右图片实现播放下一张图片，图片向后继续2秒轮换显示，单击向左图片实现播放上一张图片，图片向前继续2秒轮换显示。
任务分析
1.设计HTML页面，应用CSS美化页面。
2.定义数组，将轮换显示的图片地址保存到数组中。
3.定义两个全局变量，一个变量用于控制定时器，另一个变量用于控制数组下标。
4.定义函数实现图片的轮换显示。在函数中改变图片的地址，使用定时器函数，2秒更换图片地址，实现图片的轮流显示。
5.单击上一张或下一张按钮时将定时器清除，再重新调用图片轮换显示函数
任务实现
1.定义数组
在head标签中添加脚本代码，定义数组，将图片路径保存在数组中，并定义两个全局变量，一个用于控制定时器，一个用于控制数组下标，在页面加载时初始调用图片向后轮换显示函数showPic，参考代码如下：
<scripttype="text/javascript">
varpicsArr=new Array();
picsArr[0]="images/01.jpg";
picsArr[1]="images/02.jpg";
picsArr[2]="images/03.jpg";
picsArr[3]="images/04.jpg";
picsArr[4]="images/05.jpg";
vartimer,index=0; // timer定时器变量，index用于控制数组下标
window.onload=showPic; //页面加载时初始调用图片向后轮换显示函数showPic
</script>
2.定义向后轮流播放图片的函数
使用定时函数2秒钟改变图片的路径，将参考代码添加在<script></script>标签对中，具体代码如下：
functionshowPic(){
document.getElementById("pic").src=picsArr[index];
if(index<(picsArr.length-1))
index++;
else
index=(index+1)%picsArr.length; //通过模运算index值的取值范围在0-4之间
timer=setTimeout("showPic()",2000);
}
3.定义向前轮流播放图片的函数
将参考代码添加在<script></script>标签对中，具体代码如下：
functionshowPrepic()
{
if(index>0)
index--;
else
index=4;
document.getElementById("pic").src=picsArr[index];
timer=setTimeout("showPrepic()",2000);
}
4.定义向前向后“按钮”效果函数
functionshowNext()
{
clearTimeout(timer);
showPic();
}
function showPre()
{
clearTimeout(timer);
showPrepic();
}
案例素材
制作页面:使用数组存放四条信息，在页面加载时的文本域显示第一条信息，根据数组实际存放信息数在文本框中显示“共有几条”，单击【阅读】按钮显示下一条信息，当显示最后一条信息后，再次单击【阅读】按钮则提示“已经是最后一条信息了！”
参考答案
