<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Busy - 电商</title>
<style>
body,ul{margin: 0; padding: 0;}
li{list-style: none;}
.banner{
width: 800px;
height: 450px;
margin: 100px auto;
position: relative;
overflow:hidden;}
.banner_imgs{
width: 800px;
position: absolute;
left: 0;
top:0px;}
.banner_imgs li{
float: left;}
.banner_imgs img{
width: 800px;
height: 100%;
display: block;}
.number{
width: 100%;
text-align:center;
position: absolute;
left: 0;
bottom: 20px;}
.number a{
display: inline-block;
width: 20px;
background-color: #fff;
height: 6px;
overflow: hidden;}
</style>
<script>
window.onload =function(){
var img=document.getElementById("img");
var a=document.getElementById("number").getElementsByTagName("a");
var b=[];
for(var j=0;j<a.length;j++){
b.push(j);
b[j].onclick=function(){
img.style.top=-450*this+'px';
}
}
}</script>
</head>
<body>
<div class="banner">
<ul id="img" class="banner_imgs">
<li><a href="javascript:;"><img src="http://img.mukewang.com/53ad2498000174af13660768.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="http://img.mukewang.com/53ad25df0001300613660768.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="http://img.mukewang.com/53ad26010001ac1113660768.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="http://img.mukewang.com/53ad26170001a86013660768.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="http://img.mukewang.com/53ad26320001289e13660768.jpg" alt=""></a></li>
</ul>
<div id="number" class="number">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
var img=document.getElementById("img");
var a=document.getElementById("number").getElementsByTagName("a");
var b=[];
for(var j=0;j<a.length;j++){
(function(j){
a[j].onclick= function(){
img.style.top=-450*j+'px';
}
}(j))
}