<!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>
<style>
*{ padding:0; margin:0; border:0}
.image{display:none}
.show{display:block}
.hide{display:none}
#box{ position:relative; width:500px; height:600px}
#box ul li{ list-style:none; float:left; margin-right:5px; width:30px; height:30px; text-align:center; line-height:20px; border:1px solid #69C; background-color:#EBE0CE}
#box ul li a{ display:block;text-decoration:none;}
#row{ position:absolute; bottom:10px; right:10px }
</style>
<script type="text/javascript">
var CURRID=1;//全局变量 当前编号
var TIME=0;//自动播放时间
var $ = function (id) {//通过ID取对像，简化代码
return "string" == typeof id ? document.getElementById(id) : id;
};
var goto=function(id){//点击事件
clearTimeout(TIME);
move(id)
TIME=setTimeout('autoPlay()',2000);//调用入口
};
var move=function(id){//切换显示
var pictureId='picture'+id;
//var thumbId='thumb'+id;
for(var i=1;i<6; i++){
var j='picture'+i;
$(j).className='hide';
}
$(pictureId).className='show';
CURRID=id;
}
var autoPlay=function(){//自动播放
CURRID++;
if(CURRID>5)
CURRID=1;
move(CURRID);
TIME=setTimeout('autoPlay()',2000);
}
TIME=setTimeout('autoPlay()',2000);//调用入口
</script>
<body>
<div id="box">
<div class ="image show" id="picture1">
<img src="p1.jpg" width="500" height="600"/>
</div>
<div class ="image "id="picture2">
<img src="p2.jpg" width="500" height="600"/>
</div>
<div class ="image "id="picture3">
<img src="p3.jpg" width="500" height="600"/>
</div>
<div class ="image"id="picture4">
<img src="p4.jpg" width="500" height="600"/>
</div>
<div class ="image"id="picture5">
<img src="p5.jpg" width="500" height="600"/>
</div>
<ul id="row">
<li><a id="row1" href="#1" onmouseover="goto('1')" onclick="return false">1</a></li>
<li><a id="row2" href="#2" onmouseover="goto('2')" onclick="return false">2</a></li>
<li><a id="row3" href="#3" onmouseover="goto('3')" onclick="return false">3</a></li>
<li><a id="row4" href="#4" onmouseover="goto('4')" onclick="return false">4</a></li>
<li><a id="row5" href="#5" onmouseover="goto('5')" onclick="return false">5</a></li>
</ul>
</div>
</body>
</html>
- 1
- 2
- 3
前往页