jquery 无缝滚动轮播图

代码如下：

ul{margin: 0}
	/*轮播图 start*/
		.slider_box{
			width: 400px;
			height: 200px;
			overflow: hidden;
			position: relative;
			margin: 20px auto;
			border: 1px solid #000;
		}
		.slider_box .slide-content{
		    width: 100%;
		    height: 100%;
		    position: relative;
		}
		.slide-item{
			float: left;
			width: 400px;
			height: 200px;
			font-size: 0;
			position: relative;
		}
		.slide-item img{
			width: 100%;
			height: 100%;
		}
		.slide_info{
		    width: 100%;
		    height: 40px;
		    line-height: 40px;
		    background: rgba(0,0,0,0.5);
		    background: #000000\9;
		    filter:alpha(opacity=80)\9;
		    color: #ffffff;
		    font-size: 16px;
		    position: absolute;
		    bottom: 0;
		    right: 0;
		}
		.slide_info>div{
		    height: 100%;
		    margin-left: 10px;
		    overflow: hidden;
		    white-space:nowrap;
		    text-overflow:ellipsis;
		}
		.slide_info>div p{
		    margin: 0;
		    color: #ffffff;
		    filter: alpha(opacity=100)\9;
		}

	/* 导航点 */
		.slider_box .slider-pointer{
		    position: absolute;
		    right: 20px;
		    bottom: 8px;
		    color: #ffffff;
		    list-style: none;
		    padding: 0;
		    z-index: 999;
		}
		.slider_box .slider-pointer li {
		    display: inline-block;
		    *display:inline;
		    *zoom:1;
		    margin: 0 4px;
		    width: 12px;
		    height: 12px;
		    border-radius: 100%;
		    background: #a9acaa;
		    transition: all 320ms ease;
		    cursor: pointer;
		}
		.slider_box .slider-pointer li.active{
		    background: #d84343;
		}
	/* #导航点 end */
	/* 按钮 start */
		.slider_box .slider-control {
		    position: absolute;
		    width: 46px;
		    height: 60px;
		    z-index: 999;
		    text-align: center;
		    color: #463f3c;
		    font-weight: 900;
		    font-size: 20px;
		    line-height: 60px;
		    background: rgba(189,181,176,0.5);
		    background: #ffffff\9;
		    filter:alpha(opacity=80)\9;
		    cursor: pointer;
		    top: 40%;
		    /*box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.5);*/
		    transition: all 320ms ease;
		}
		.slider_box .slider-control:hover {
		    opacity: 0.65;
		}
		.slider_box .slider-control:active {
		    opacity: 0.85;
		}
		.slider_box .slider-control.prev {
		    display: none;
		    left: 0;
		    background: url("./img_ml.png") no-repeat;
		}
		.slider_box .slider-control.next {
		    display: none;
		    right: 0;
		    background: url("./img_mr.png") no-repeat;
		}
		.slider_box:hover .slider-control.prev {
		    display: block;
		    left: 0;
		}
		.slider_box:hover .slider-control.next {
		    display: block;
		    right: 0;
		}
	/* #按钮 */
	/*轮播图 end */

<div class="slider_box">
		<div class="slide-content">
			<div class="slide-item">
				<img src="./7dd58bb4gy1fz9xpqfz9wj20q40xcwgz.jpg"/>
				<div class="slide_info">
                    <div><p>图片1</p></div>
                </div>
			</div>
			<div class="slide-item">
				<img src="./7dd58bb4gy1fz9xprj1n6j20go0jojsl.jpg"/>
				<div class="slide_info">
                    <div><p>图片2</p></div>
                </div>
			</div>
			<div class="slide-item">
				<img src="./7dd58bb4gy1fz9xptkty4j20xc0sxmzp.jpg"/>
				<div class="slide_info">
                    <div><p>图片3</p></div>
                </div>
			</div>
		</div>
	</div>

<script src="./jquery-1.11.1.js" type="text/javascript"></script>
	<script type="text/javascript">
		/*
		* 轮播图的思路：
		* 1.先复制一份需要轮播的元素，加载轮播容器的后面相当于（1，2，3，复1，复2，复3）
		* 2.轮播元素定位于复1的位置(重点，point点击会用到)
		* 3.可以开始轮播了，当走到最后一张图时（复3），瞬间定位到复制前的最后一张图（即3）
		* 4.点击前进按钮，走到第一张图（1）时，瞬间定位到复制第一个图（复1）
		*/
		;(function($){
			$.fn.Carousel=function(options){
				var defaluts = {
				   'box':this,
				   'slider':this.find('.slide-content'),
				   'distance':this.find('.slide-item').outerWidth(true),
				   'size':this.find('.slide-item').length,
				   'autoPlay':false, //是否自动轮播
				   'animateTime':1,//动画速度时间：秒
				   'time':3, //轮播图切换时间：秒
				   'timer':null, //定时器
				   'index':0 //当前索引值
				};
				var opts = $.extend({},defaluts, options); //使用jQuery.extend 覆盖插件默认参数
				init();
				function init(){
					if(opts.size>1){
						/*生成点和按钮*/
						var point='';
		                for(var i=0;i<opts.size;i++){
		                    point+='<li></li>';
		                }
		                opts.box.append('<ul class="slider-pointer">'+point+'</ul>'
		                    +'<div class="slider-control prev"></div><div class="slider-control next"></a>');
		                $('.slider-pointer li').eq(0).addClass('active');
		                /*生成点和按钮 end*/
		                opts.index=opts.size;
		                opts.slider.append(opts.slider.html()).css({'width':opts.distance*opts.size*2,'left':opts.distance*opts.size*-1});
		                if(opts.autoPlay==true){
		                	autoPlay();
		                }
		                MouseHover();
		                btnClick();
		                liClick();
					}
		
				}
				function move(){
					opts.slider.stop().animate({'left': opts.distance*opts.index*-1},opts.animateTime*1000, function() {
						if(opts.index>=opts.size*2-1){
							opts.index=opts.size-1;
							opts.slider.css({'left':opts.distance*opts.index*-1});
						}
						if(opts.index<=0){
							opts.index=opts.size;
							opts.slider.css({'left':opts.distance*opts.index*-1});
						}
					});
					$('.slider-pointer li').removeClass('active').eq(opts.index%opts.size).addClass('active');
				};
				function autoPlay(){
					opts.timer=setInterval(function(){
						opts.index++;
						move();
					},opts.time*1000);
				};
				function MouseHover(){
					opts.box.hover(function(){
						clearInterval(opts.timer);
					},function(){
						autoPlay();
					});
				};
				function btnClick(){
					opts.box.find('.prev').click(function() {
						if(!opts.slider.is(':animated')){
							opts.index--;
							move();
						}
					}).end().find('.next').click(function(){
						if(!opts.slider.is(':animated')){
							opts.index++;
							move();
						}
					});
				};
				function liClick(){
					opts.box.find('.slider-pointer li').click(function(){
						opts.index=$(this).index()+opts.size;
						move();
					});
				};
			};
			$('.slider_box').Carousel({'autoPlay':true});
		})(jQuery);