简单的图片自动轮换
2016-06-24 14:44
357 查看
代码如下:
<!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()函数放在函数内部,因此可以循环重复执行,如果放在外部外面只能执行一次。、
<!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()函数放在函数内部,因此可以循环重复执行,如果放在外部外面只能执行一次。、
相关文章推荐
- 简单的图片自动轮换
- PoE供电、集中供电、点对点供电各自的优缺点
- window7安装python的xgboost库方法
- 3.0、Android Studio构建和运行应用
- 3.0、Android Studio构建和运行应用
- (OpenGL ES 2.0 Shading Language) attribute 、uniform 和 varying
- Cognition math based on Factor Space (2016.05)
- 转载:void与void*详解
- CentOS7下部署Ceph集群(版本10.2.2)
- Java NIO Tutorial
- Android --- 读取系统资源 getResources
- sed流式编辑器
- Linux 脚本编写基础
- Cygwin下面,apt-cyg的使用方法和基本原理
- Java实验(4) 合并数组
- cisco 路由器ISO升级
- cmd控制台的点阵字体不能调整大小的解决办法
- class类文件结构
- Android捕获崩溃异常
- Yii2.0 数据库查询