<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>哈哈</title>
<style type="text/css">
.slider{
width:400px;
margin:auto;
}
ul li {
list-style:none;
}
li{
float:left;
position:absolute;
display:none;
}
</style>
</head>
<body>
<div class="slider">
<ul>
<li class="lis"><img src="http://img01.taobaocdn.com/tps/i1/T1ANWkXXVdXXXXXXXX-490-170.png"/></li>
<li class="lis"><img src="http://i.mmcdn.cn/simba/img/T1Uw9kXjRXXXXXXXXX.jpg?noq=y"></li>
<li class="lis"><img src="http://i.mmcdn.cn/simba/img/T1XMp7XidDXXXXXXXX.jpg?noq=y"></li>
<li class="lis"><img src="http://i.mmcdn.cn/simba/img/T1Uzx7XjdpXXXXXXXX.jpg?noq=y"></li>
<li class="lis"><img src="http://img02.taobaocdn.com/tps/i2/T1qzx7XdxBXXXXXXXX-490-170.jpg"></li>
</ul>
</div>
<script type="text/javascript">
var lis = document.getElementsByClassName('lis');
var n=0;
var speed = 5000;
function show(y)
{
if(y)
{
n = y;
}
lis[n].style.display = "block";
none(n);
n++;
setTimeout("show()",speed);
if(n == lis.length)
{
n=0;
}
}
show();
function none(x)
{
for(var i=0;i<lis.length;i++)
{
if(i != x)
{
lis[i].style.display = "none";
}
}
}
function show_num()
{
for(var d=0;d < lis.length;d++)
{
document.write('<span class="num_box"><a href="#" onclick="show('+d+')">'+d+'</a></span>');
}
}
show_num();
</script>
</body>
</html>