<style>
*{
margin:0;
padding:0;
}
#outer{
width:800px;
height:450px;
overflow:hidden;
position:relative;
}
#inner{
position:absolute;
width:4800px;
overflow:hidden;
}
#inner img{
width:800px;
height:450px;
float:left;
}
#rightBtn{
position:absolute;
left:0;
top:50%;
margin-top:-50px;
background:rgba(0,0,0,0.5);
width:50px;
height:100px;
font-size:40px;
line-height:100px;
text-align:center;
color:white;
}
#leftBtn{
position:absolute;
right:0;
top:50%;
margin-top:-50px;
background:rgba(0,0,0,0.5);
width:50px;
height:100px;
font-size:40px;
line-height:100px;
text-align:center;
color:white;
}
</style>
<div id="outer">
<div id="inner" style="left:-800px;">
<img src="img/12.jpg" alt="" />
<img src="img/1.jpg" alt="" />
<img src="img/10.jpg" alt="" />
<img src="img/11.jpg" alt="" />
<img src="img/12.jpg" alt="" />
<img src="img/1.jpg"/>
</div>
<div id="rightBtn"><</div>
<div id="leftBtn">></div>
</div>
<script type="text/javascript">
function scroll(obj1,obj2,obj3){
this.obj1 = obj1;
this.obj2 = obj2;
this.obj3 = obj3;
}
scroll.prototype.move = function(){
this.oLeft = parseInt(this.obj1.style.left);
var that = this;
this.obj2.onclick = function(){
that.scrollLeft();
}
this.obj3.onclick = function(){
that.scrollRight();
}
}
scroll.prototype.scrollLeft = function(){
var that = this;
clearInterval(this.time);
clearTimeout(this.time1);
this.time = setInterval(movestart,1);
function movestart(){
that.oLeft--;
if(that.oLeft%800==0){
if(that.oLeft==(-4000)){
that.oLeft = -800;
}
clearInterval(that.time);
that.time1 = setTimeout(function(){
that.time = setInterval(movestart,1);
},1000)
}
that.obj1.style.left = that.oLeft + "px";
}
}
scroll.prototype.scrollRight = function(){
var that = this;
clearInterval(this.time);
clearTimeout(this.time1);
this.time = setInterval(movestart,1);
function movestart(){
that.oLeft++;
if(that.oLeft%800==0){
if(that.oLeft==0){
that.oLeft = -3200;
}
clearInterval(that.time);
that.time1 = setTimeout(function(){
that.time = setInterval(movestart,1);
},1000)
}
that.obj1.style.left = that.oLeft + "px";
}
}
window.onload = function(){
var inner = document.getElementById("inner");
var rightBtn = document.getElementById("rightBtn");
var leftBtn = document.getElementById("leftBtn");
var scrollnow = new scroll(inner,leftBtn,rightBtn);
scrollnow.move();
}
</script>
