<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0;text-decoration:none;}
#container{width:600px;
height:450px;
border:3px solid red;
position:relative;
overflow:hidden;}
#list{width:4200px;height:450px;position:absolute;z-index:1;}
#list img{float:left;}
.arrow{line-height:39px;font-size:36px;font-weight:bold;corsor:pointer;display:none;width:38px;height:38px;background:#fff;background-color:rgba(0,0,0,0.3);position:absolute;z-index:2;text-align:center;top:40%}
#prve{left:10px}
#next{right:10px}
#container:hover .arrow{display:block;}
.arrow:hover{background-color:rgba(0,0,0,.7);}
</head>
</style>
<script>
window.onload=function(){
var container=document.getElementById("container");
var list=document.getElementById("list");
var button=document.getElementById("botton").document.getElementsByTagName("span");
var prve=document.getElementById("prve");
var next=document.getElementById("next");
function animate(offset){
list.style.left=parseInt(list.style.left)+offset+"px";}
nxet.onclick=function(){
animate(-600);
}
prve.onclick=function(){
animate(600);
}
}
</script>
<body>
<div id="container">
<div id="list" style="left:0px;">
<img src="img/img5.png" alt="5">
<img src="img/img1.png" alt="1">
<img src="img/img2.png" alt="2">
<img src="img/img3.png" alt="3">
<img src="img/img4.png" alt="4">
<img src="img/img5.png" alt="5">
<img src="img/img1.png" alt="1">
</div>
<div id="botton">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:" class="arrow" id="prve"><</a>
<a href="javascript:" class="arrow" id="next">></a>
</div>
</body>
</html>
