jQuery实现图片无缝滚动

<div class="box">
<div class="box_img">
<img src="img3/B (1).jpg"/>
<img src="img3/B (2).jpg"/>
<img src="img3/B (3).jpg"/>
<img src="img3/B (4).jpg"/>
</div>
<ul class="btn">
<li class="left"></li>
<li class="right"></li>
</ul>
</div>

<style type="text/css">
*{
margin: 0;padding: 0;
}
.box{
width: 1235px;height: 358px;
border: 1px solid red;
margin: auto;
position: relative;
overflow: hidden;
}
.box_img{
width: 4940px;height: 358px;
border: 1px solid blue;
}
img{display: block;
width: 1235px;height: 358px;
}
.box_img img{
float: left;
}

ul li{list-style: none;float: left;
margin-top: -40px;
}
.btn .left{
position: absolute;
left: 0px;top:50%;
width: 40px;height: 80px;
background: url(img3/nav_paddles_down.png) no-repeat -15px -7px;
}
.btn .right{
position: absolute;
right: 0px;top:50%;
width: 40px;height: 80px;
background: url(img3/nav_paddles_down.png) no-repeat -64px -7px;
}
</style>

<script>
$(function(){
$('.right').click(function () {
$(".box_img").animate({marginLeft:"-1235px"},600, function () {
$(".box_img img").eq(0).appendTo($(".box_img"));
$(".box_img").css('marginLeft','0px');
});
})
$('.left').click(function () {
$(".box_img").css('marginLeft','-1235px');
$(".box_img img").eq(3).prependTo($(".box_img"));
$(".box_img").animate({marginLeft:"0px"},600);
/*为什么先给css()方法 ，然后再给动画呢

* 	这是为了让图片轮播的时候  看起来是倒放的，
* 先给css()方法 ，让图片实现位移，但这时不是倒放，
* 显示的也不是最后一张，而是第二张
* 所以这时候就得需要用到appendTo()
* 把最后一张（实际是第一张）放到现在窗口显示的图片的后面
* 接着用animate()这个方法，让图片回到原来的位置
* 图片就会往回滚动到原本的位置
* 这时图片看起来才有滚动的效果
*
* */
})
</script>