<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<title>Image play</title>
<style>body{
width:430px;
margin:20px auto;
}
p.now{
display:block;
width:400px;
height:200px;
overflow:hidden;
border:1px solid#ccc;}
li.now{
color:#ccc;}
li{list-style:none;float:left;
padding:010px;
margin-bottom:5px;
border:1px solid#ccc;background:#eee;}#fd{list-style:none;float:left;
padding:010px;
border:1px solid#ccc;margin:0auto;
background:#eee;}
img{
width:400px;
height:200px;
padding:1px;/*padding-top:18px;*/}</style>
</head>
<body>
<div id="fd">
<pclass="now"><img src="./images/pic1.jpg"></p>
<p style="display:none;"><img src="./images/pic2.jpg"></p>
<p style="display:none;"><img src="./images/pic3.jpg"></p>
<p style="display:none;"><img src="./images/pic4.jpg"></p>
<ul>
<liclass="now">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script>vartags=$("fd").getElementsByTagName("li");//获取切换按钮节点varcats=$("fd").getElementsByTagName("p");//获取切换内容节点varcurrent;//高置当前帧的变量宣容器vartimer=2000;//设置2秒循环一次functiondisAll(){for(vari=0; i<tags.length; i++){
tags[i].className="";
cats[i].className="";
cats[i].style.display="none";
}
}functionsetNow(){for(vari=0; i<tags.length; i++){if(tags[i].className=="now"){current=i;
}
}
}for(varj=0; j<tags.length; j++){
tags[j].onmouSEOver=function(){
clearInterval(h);
disAll();
this.className="now";
setNow();
cats[current].style.display="block";
cats[current].className="now";
}
tags[j].onmouseout=function(){
setNow();
h=setInterval("goNext()", 3000);
}
}functiongoNext(){
setNow();current+=1;if(current>=parseInt(tags.length)){current=0;
disAll();
cats[0].style.display="block";
tags[0].className="now";
cats[0].className="now";
}else{
disAll();
cats[current].style.display="block";
cats[current].className="now";
tags[current].className="now";
}
}varh=setInterval("goNext()",timer);function$(obj){returndocument.getElementById(obj);
}</script>
</body>
</html>