<!DOCTYPE html>


<html>


<head>


<meta charset="utf-8" />


<title></title>


<script src="js/jquery-2.1.1.js"></script>


<style>


#box{


width:280px;


height: 200px;


overflow: hidden;


margin: 0 auto;


position: relative;




}


#box #imgs{


height: 200px;


width: 1120px;


position: absolute;


left: 0;


top:0;




}


img{


height: 200px;


width: 280px;


float: left;


}


#left{


position: absolute;


top: 90px;


left:0;


width: 20px;


height: 20px;


}


#right{


position: absolute;


top: 90px;


left:260px;


width: 20px;


height: 20px;


}


</style>


</head>


<body>


<div id="box">


<div id="imgs">


<img src="img/mn1.jpg"/>


<img src="img/mn2.jpg"/>


<img src="img/mn3.jpg"/>


<img calss = 'btn' src="img/mn4.jpg"/>


<img calss = 'btn' src="img/mn1.jpg"/>






</div>


<img src="img/l.png" id = 'left'/>


<img src="img/r.png" id = 'right'/>


</div>


</body>


<script type="text/javascript">


var timer;


var i = 0


function gun(){




timer = setInterval(fun,500);








function fun(){




i++;


console.log(i);


if(i == 5){


i = 1;


$('#imgs').css('left', 0)




}




$('#imgs').animate({


'left' : -280*i


},200,'linear');


}




}


gun();


$('.btn').on('click',function(){


clearInterval(timer);




if(i==0){


i = 4;




}if($(this).index() == 0)


$('#imgs').animate(


{left :i *(-280)},function () {


gun();


}


)


});




</script>


</html>