幻灯片demo1:
<!DOCTYPE html>
<style>
div{
position:absolute
}
</style>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body onload="start_timer()">
<script>
var n = 1; //全局变量，记录当前图片的序号
var timer = null;//全局变量，计时器
//将图片换成第no张
function changeToN(no)
{
//利用图片的文件名和序号一致
//1 获得img
var img = document.getElementsByTagName("img")[0];
//2 修改src属性
img.setAttribute("src","img/"+no+".jpg");
//3 给对应的div加高亮塞
resetdiv();//还原所有的颜色
var div = document.getElementById("d"+no);
div.style.backgroundColor = "cadetblue";
//4 修改全局变量的当前图片序号
n = no;
}
//每个计时器要执行的代码
function doInTimer()
{
if(n<5)
n++;
else
n = 1;
changeToN(n);//调用函数，更改图片
}
//启动计时器
function start_timer()
{
if (timer==null)
timer = window.setInterval("doInTimer()",2000);
}
//停止计时器
function stop_timer()
{
window.clearInterval(timer);
timer = null;
}
</script>
<div style="left:200px; top:200px; 300px; height: 200px; background-color: gold;">
<img src="img/1.jpg" width="100%" height="100%"
onmouseover="stop_timer()" onmouseout="start_timer()" />
</div>
</body>
</html>