<!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>
转载于:https://blog.51cto.com/1306733/1834582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
