1 <html>
2 <head>
3 <script type="text/javascript">
4 /******************************************带控制按钮的简单幻灯片*********************************************/
5 var i=0; //定义全局变量i timeout
6 var timeout;
7 function preLoadImages(){ //创建预加载函数数组，数组由3张图片
8 Planet=new Array();
9 Planet[0]=new Image();
10 Planet[0]="images/2.jpg";
11 Planet[1]=new Image();
12 Planet[1]="images/3.jpg";
13 Planet[2]=new Image();
14 Planet[2]="images/4.jpg";
15 }
16 function start(){ //定义开始函数
17 if (i<Planet.length){
18 document.images["images_name"].src=Planet[i];
19 i++; //当i的值小于数组的值，会循环显示新图片
20 }
21 else{
22 i=0; //当i的值达到数组的最大值3时，把数组的索引值重置为0
23 document.images["images_name"].src=Planet[i];
24 }
25 timeout=setTimeout('start()',1000); //每1秒切换一张图片
26 }
27 function stop(){
28 clearTimeout(timeout); //清楚Timeout 即停止图片切换
29 }
30 </script>
31 </head>
32
33 <body onload="preLoadImages();"> <!--页面加载是onLoad事件被触发，调用preLoadImages()函数先将图片预先加载-->
34 <div align="center">
35 <h2>带控制按钮的简单幻灯片展示</h2>
36 <img name="images_name" src="images/1.jpg"/>
37 <p><input type="button" value="开始" onClick="start();"/> <input type="button" value="停止" onClick="stop();"/></p>
38 </div>
39 </body>
40 </html>
