您的位置：首页 > Web前端 > JavaScript

Js实现多张图片有规律的随机切换

2012-06-02 15:33 507 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多张图片切换</title>
</head>

<body>
<div id="pics" align="center">
<img src="img/4.jpg"  id="pic" width="500" height="300"/>
</div>
<div id="title" align="center">
图片4
</div>

<script language="javascript">
<!--
/*
利用tmp在0到2之间的循环切换实现三张图片（或三张以上的图片）的切换
借助辅助累加标识i不断的递增
*/

var index = 1 ;            //全局变量，在0到(num-1)之间循环
var num = 4;
var img = document.getElementById("pic");   //获取图片ID
var title = document.getElementById("title");
function picChange(){

switch(index){
case 1: img.src="img/1.jpg"; break;   //切换到1.jpg
case 2: img.src="img/2.jpg"; break;   //切换到2.jpg
case 3: img.src="img/3.jpg"; break;   //切换到3.jpg
case 4: img.src="img/4.jpg"; break;   //切换到4.jpg
}

title.innerHTML = "图片"+index;     //修改标题

index++;						 //切换到下一张

if(index > num){
index = index % num;       //大于最多图片数量后回到第0张
}

}
setInterval("picChange()", 2000); //设置定时器，作用于PicChange()函数内，时间为1000毫秒刷新一次
-->
</script>

</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航