图像自动切换

来源：互联网发布：淘宝卖家手机怎么登录编辑：程序博客网时间：2024/05/21 05:54

图像自动切换

图像自动切换一般可以使用JavaScript的定时器来按照一定的时间间隔更新<img>标签中的src属性。

JavaScript中的定时器可通过setInterval函数实现，代码如下：

setInterval("function()",interval);

test.html源代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>自动切换图片</title><script type="text/javascript">setInterval("loadImage()", 3000);//启动定时器var images = ['0.jpg','1.jpg','2.jpg','3.jpg','4.jpg'];//指定图像文件名var i = 0;//从第一个图像文件开始显示//装载图像文件(定时器调用)function loadImage() {i++;//当显示到第五个图像文件时，再从第一个图像开始循环if(i==5)i=0;var oImage = document.getElementById("image");//得到Img标签var oLabel = document.getElementById("info");//得到Label标签oImage.src = 'images/'+images[i];//为img标签的src属性赋值oLabel.innerText = images[i];//显示当前的图像文件名}</script></head><body> 当前图像名：<label id="info"></label> <p /><img src='images/0.jpg' id="image" width="320px" height="240px"><script type="text/javascript">var oLabel = document.getElementById("info");//在初始化时显示第一个图像文件oLabel.innerText = images[i];</script></body></html>

0 0