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显示一张图片。

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