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>