简单的图片自动轮换

最新推荐文章于 2019-12-04 00:31:02 发布

ios0213

最新推荐文章于 2019-12-04 00:31:02 发布

阅读量448

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/ios0213/article/details/51752661

版权

JavaScript 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div{
	width:70%;
	padding:0;
	margin:0 auto;
	border:1px solid #CCC;
	text-align:center;
}
</style>
</head>

<body onLoad="imgMove()">  
<div>
<img id="img" src="photo01.jpg" height="300px" width="400px" />
</div>
<script>
var imgshow=new Array();
imgshow[0]="photo01.jpg";
imgshow[1]="photo02.jpg";
imgshow[2]="photo03.jpg";
imgshow[3]="photo04.jpg";
var i=0;
var img=document.getElementById("img");
function imgMove()
{
	if(i>3)
	{
		i=0;
	}
	img.src=imgshow[i];
	i++;
	setTimeout("imgMove()",1500);	
}
</script>
</div>
</body>
</html>

在这里，有两个需要注意的地方就是：

1，由于定义了一个function imgMove()函数，定义的函数在<script></script>内部是无法直接执行的，因此需要在文档开始加载执行这个函数。

var imgshow=new Array();
imgshow[0]="photo01.jpg";
imgshow[1]="photo02.jpg";
imgshow[2]="photo03.jpg";
imgshow[3]="photo04.jpg";
var i=0;
var img=document.getElementById("img");

这个定义在函数外面，相当于全局变量，不用写在函数内部。

setTimeout("imgMove()",1500);

setTimeout()函数放在函数内部，因此可以循环重复执行，如果放在外部外面只能执行一次。、

ios0213

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单的图片自动轮换

代码如下：无标题文档div{ width:70%; padding:0; margin:0 auto; border:1px solid #CCC; text-align:center;} var imgshow=new Array();imgshow[0]="photo01.jpg";imgshow[1]="photo02.jpg";imgs
复制链接

扫一扫