图像自动切换

原创于 2009-11-12 15:17:46 发布 · 166 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #XHTML #HTML #ViewUI

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个简单的图像自动轮播实现方案，使用JavaScript设定时间间隔自动切换图片，并更新图像说明。通过设置数组存储图片路径，利用setInterval函数达到定时切换的效果。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图像自动切换</title>
<script language =javascript > 
	var curIndex=0; 
	//时间间隔 单位毫秒 
	var timeInterval=1000; 
	var arr=new Array(); 
	arr[0]="img/01.jpg"; 
	arr[1]="img/02.jpg"; 
	arr[2]="img/03.jpg"; 
	arr[3]="img/04.jpg"; 
	arr[4]="img/05.jpg"; 
	arr[5]="img/06.jpg"; 
	arr[6]="img/07.jpg"; 
	//启动定时器
	setInterval(changeImg,timeInterval); 
	
	function changeImg() 
	{ 
		var myImg=document.getElementById("myImg"); //得到img标签
		var info = document.getElementById("info");//得到label标签
		if (curIndex==arr.length-1) 
		{ 
			curIndex=0; 
		} 
		else 
		{ 
			curIndex+=1; 
		} 
		myImg.src=arr[curIndex]; //
		info.innerText = "第"+curIndex+"张图像";//显示为当前的图像说明
	} 
</script>
</head>
<body>
    <center>
        <label id="info">图像</label><br />
        <img id="myImg" src ="img/01.jpg" border =0 width="500px" />
    </center>
</body>