您的位置：首页 > 其它

简单的图片自动轮换

2016-06-24 14:44 375 查看

代码如下：

<!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>内部是无法直接执行的，因此需要在文档开始加载执行这个函数。

2. 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");这个定义在函数外面，相当于全局变量，不用写在函数内部。
3.setTimeout("imgMove()",1500);setTimeout()函数放在函数内部，因此可以循环重复执行，如果放在外部外面只能执行一次。、

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航