<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{list-style:none;}
*{margin:0;padding:0;}
#box{width:1750px;height:940px;margin: 0 auto;overflow:hidden;position:relative;border: 2px #000 solid;}
#ul{height:940px;width: 8750px;position:absolute;left:-1750px;}
#ul li{width:1750px;height:940px;float:left;}
span{width:25px;height:25px;background:#000;}
span a{text-decoration:none;font-size:20px;color:#fff;line-height:25px;}
.none{margin-left:5px;}
</style>
</head>
<body>
<div id="wrap">
<div id="box">
<ul id="ul">
<li>
<img src="banner3.jpg">
</li>
<li>
<img src="banner1.jpg">
</li>
<li>
<img src="banner2.jpg">
</li>
<li>
<img src="banner3.jpg">
</li>
<li>
<img src="banner1.jpg">
</li>
</ul>
</div>
<span id="span_1"><a href="#"> < </a></span>
<span id="span_2"><a href="#" class="none"> > </a></span>
</div>
<script type="text/javascript">
var ul = document.getElementById("ul");
var lis = ul.getElementsByTagName("li");
var span_1 = document.getElementById("span_1");
var span_2 = document.getElementById("span_2");
index = 1;
var lislen = lis.length;
var nim = lis[0].offsetLeft * lislen + "px";
var toggle = true;
var speed = -50;
var newleft = ul.offsetLeft;
span_1.onclick = function(){
if(toggle){
toggle = false;
index++;
var timer = setInterval(function(){
newleft = newleft + speed;
//console.log(newleft);
if (newleft <= -1750*index){
newleft = -1750*index;
toggle =true;
clearInterval(timer);
}
ul.style.left = newleft + "px";
if(index==4 && newleft == -1750*index){
index = 1;
ul.style.left = -1750 + "px";
newleft = -1750;
}
},1000/60)
}
};
span_2.onclick = function(){
index--;
ul.style.left = -1750*index+"px";
if(index<=0){
index=3;
}
};
/*span_1.onclick = function(){
index++;
ul.style.left = -1750*index+"px";
if(index>=4){
index=1;
}
}*/
</script>
</body>
</html>
