JavaScript实现图片之间切换

最新推荐文章于 2022-04-27 20:57:11 发布

codefalse

最新推荐文章于 2022-04-27 20:57:11 发布

阅读量1k

点赞数

分类专栏： JavaScript&Ajax 文章标签： javascript button function image action input

本文链接：https://blog.youkuaiyun.com/Kezhongke/article/details/7980928

版权

JavaScript&Ajax 专栏收录该内容

1 篇文章

订阅专栏

<html>
<head>
<title>手动图像切换</title>
<script type="text/javascript">
	var image;
	var current = 0;
	var images = new Array(5);
	function init(){
		for(var i=0;i<images.length;i++){
			images[i] = new Image(300,300);
			images[i].src = "images/"+i+".jpg";
		}
		image = document.images[0];
	}
	function setSrc(i){
		current = i;
		image.src = images[i].src;
	}
	function next(){
		if(current>=4){
			return false;
		}else{
			current++;
			setSrc(current);
		}
	}
	function previous(){
		if(current<=0){
			return false;
		}else{
			current--;
			setSrc(current);
		}
	}
	function play(){
		if(current>=4){
			current = -1;
		}
		setSrc(++current);
	}
</script>
</head>
<body οnlοad="init()">
<form action="" method="post" >
	<input type="button" value="第一张" οnclick="setSrc(0)" />
	<input type="button" value="下一张" οnclick="next()" />
	<input type="button" value="上一张" οnclick="previous()" />
	<input type="button" value="最后一张" οnclick="setSrc(4)" />
	<input type="button" value="幻灯播放" οnclick="timeID = setInterval(play,1000)" />
	<input type="button" value="停止播放" οnclick="clearInterval(timeID)">
</form>
<p>
<div align="center"><img src="images/0.jpg" /></div>
</body>
</html>