jQuery实现图片无缝滚动

HTML代码：

	<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>

CSS代码：

<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>

jQuery代码：

<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>