Javascript实现幻灯片效果

Web上很多页面都有提供javascript幻灯效果的代码库，我们可以免费直接使用很多优秀的代码库。今天我开始学习用JavaScript实现幻灯效果，新手一步一步开始学起。
在创建一个幻灯效果的时候，页面的访客是我们需要首要考虑的因素。其中包括访问者的带宽、浏览器的类型、在下载大图片的时候是否需要漫长的下载时间。导航是第二个重要因素，访客是手动进行控制幻灯还是页面加载完成后自动播放，退出时自动停止播放还是自动循环固定次数后停止？我们可能还会想创建控制按钮，像开始、结束、暂停、前进、后退、加速播放、减速播放等。还会想在图片上创建超链接和可单击的图片，每帧图片都连接到不同的URL。甚至会想随机地显示图片或者按照某种顺序来显示。（摘自JavaScript详解）

下面就介绍一种我今天刚刚学习的最简单的带有按钮的幻灯展示。

<div style="text-align:center;">
<br>
<img src="./images/1.jpg" alt="" name="pic" height="192" width="108">
<br>
<input type="button" value="start Show" onClick="return startSlideShow();">
<input type="button" value="stop Show" onClick="return stopSlideShow();">
</div>

上面代码为html主体，包括一个images和两个按钮，点击分别实现幻灯片开始和停止的功能。

function preLoadImages(){
if(document.images){
pictures = new Array();
pictures[0] = new Image();
pictures[0] = "./images/1.jpg";
pictures[1] = new Image();
pictures[1] = "./images/2.jpg";
pictures[2] = new Image();
pictures[2] = "./images/3.jpg";
pictures[3] = new Image();
pictures[3] = "./images/6.jpg";
}else{
alert("There are no images to preload!");
}
}

上面是preLoadImages函数，在HTML文档head部分定义该函数来预加载图像列表。脚本运行之前，使用该函数在浏览器的缓存中存储一些必须的照片，这样做可以减少访客的等待时间。

var index = 0;
function startSlideShow(){
if(index < pictures.length){
document.images["pic"].src = pictures[index];
index++;
}else{
index = 0;
document.images["pic"].src = pictures[index];
index++;
}
timeout = setTimeout(startSlideShow, 1500);
}

function stopSlideShow(){
clearTimeout(timeout);
}

上面代码为startSlideShow和stopSlideShow函数，通过index索引值来遍历图片的地址，并用定时器设置1.5S显示一张图片。

该功能的实际效果见连接。点击打开链接