javascript中像相册中可控制播放或停止的图片幻灯切换效果

作者：简简单单 2012-04-18

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>可控制播放或停止的图片幻灯切换效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<script type="text/javascript">
var the_images = new Array();
the_images[0] = new Image();
the_images[1]= new Image();
the_images[2]= new Image();
the_images[0].src = "/effect/images/huandeng1.jpg";
the_images[1].src = "/effect/images/huandeng2.jpg";
the_images[2].src = "/effect/images/huandeng3.jpg";
var the_timeout;
var index = 0;
function rotateImage(){//这个函数也不是循环调用数组的函数，虽然后面用settimeout，但我还是觉得这样会不会不好
	window.document.my_image.src = the_images[index].src;//因为index = 0所以显示第一副，然后经过setTimeout("rotateImage();",1000);第二次运行我还是觉得index应该等于0
	index++;
	if(index >= the_images.length){//因为最开始是设定了index = 0的所以，这个if条件是不成立的，既然不成立，那么index的值还是为0，如条件成立下面返回的值也是等于怎么都等于0，为什么还要这一句呢？
		index = 0; 
	}
	the_timeout = setTimeout("rotateImage();",1000);
}
</script>
</head>
<body>

<img  name="my_image" src="/effect/images/huandeng1.jpg"><br>
<input type="button" value="播放" onClick="clearTimeout(the_timeout);rotateImage();">
<input type="button" value="停止" onClick="clearTimeout(the_timeout)">
</body>
</html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

上一个：超简单的js网站后台管理功能折叠菜单代码下一个：javascript兼容性较强的选项卡菜单