自己写的轮播滚动组件，跟大家分享，有问题请指教。

js组件封装源码：

$.fn.extend({          
    relayAssembly:function() {  
    	var _this = $(this);
       	var _ul = $(".img-list ul");
       	var _li = $(".img-list li");
       	/*每个li固定宽度和高度*/
       	_li.width(_this.width());
       	_li.height(_this.height());
       	var _lis = $(".img-list li").length;
       	var _liwidth = $(".img-list li").width();
       	var _dul = $(".dot ul");
       	var _dli = $(".dot li");
       	/*上一张箭头*/
       	var _prev = $(".arrow .prev");
       	_prev.css("line-height",_this.height()+"px");
       	/*下一张箭头*/
       	var _next = $(".arrow .next");
       	_next.css("line-height",_this.height()+"px");
       	/*设置角标变量*/
       	var _eq = 0;
       	_ul.width(_lis*_liwidth);
       	/*监听浏览器窗口变化*/
       	var resizeTimer = null;
       	$(window).resize(function () {
       		if (resizeTimer) clearTimeout(resizeTimer);
	        resizeTimer = setTimeout(function(){
	               _li.width(_this.width());
	       			_li.height(_this.height());
	       			_liwidth = $(".img-list li").width();
	       			_ul.width(_lis*_liwidth);
	        } , 500);
       			
		});
       	var timer = setInterval(assembly,2000);
       	/*鼠标悬停停止轮播，鼠标移开开始轮播*/
       	_this.on("mouseover",function(){
			clearInterval(timer);
		}).on("mouseout",function(){
			timer = setInterval(assembly, 2000);
		});
		/*下一张*/
		_next.click(function(){
			next();
		});
		/*下一张调用函数*/
		function next(){
			_eq++;
			if (_eq == _lis) {
		       		_eq = 0;
		       		_ul.stop().animate({"margin-left":"-"+_eq*_liwidth},0);
		       		next()
		       	}else if(_eq == (_lis-1)){
		       		_dli.eq(0).addClass("active").siblings().removeClass("active");
		       		_ul.stop().animate({"margin-left":"-"+_eq*_liwidth},500);
		       	}else{
		       		_dli.eq(_eq).addClass("active").siblings().removeClass("active");
		       		_ul.stop().animate({"margin-left":"-"+_eq*_liwidth},500);
		       	}
		}
		/*上一张*/
		_prev.click(function(){
			prev();
		});
		/*上一张调用函数*/
		function prev(){
			_eq--;
			if (_eq == 0) {
		       		_eq = _lis;
		       		_ul.stop().animate({"margin-left":"-"+_eq*_liwidth},0);
		       		prev()
		       	}else if(_eq == (_lis-1)){
		       		_dli.eq(0).addClass("active").siblings().removeClass("active");
		       		_ul.stop().animate({"margin-left":"-"+_eq*_liwidth},500);
		       	}else{
		       		_dli.eq(_eq).addClass("active").siblings().removeClass("active");
		       		_ul.stop().animate({"margin-left":"-"+_eq*_liwidth},500);
		       	}
		}
		/*定时轮播*/
       	function assembly(){
	       	_eq++;
	       	if (_eq == _lis) {
	       		_eq = 0;
	       		_ul.stop().animate({"margin-left":"-"+_eq*_liwidth},0);
	       		clearInterval(timer);
	       		timer = setInterval(assembly, 0);
	       	}else if(_eq == (_lis-1)){
	       		_dli.eq(0).addClass("active").siblings().removeClass("active");
	       		_ul.stop().animate({"margin-left":"-"+_eq*_liwidth},500);
	       		clearInterval(timer);
	       		timer = setInterval(assembly, 2000);
	       	}else{
	       		_dli.eq(_eq).addClass("active").siblings().removeClass("active");
	       		_ul.stop().animate({"margin-left":"-"+_eq*_liwidth},500);
	       		clearInterval(timer);
	       		timer = setInterval(assembly, 2000);
	       	}
      	}
		//给每个dotli绑定事件
		for(var i = 0;i<_dli.length;i++){
			_dli[i].onclick = function(){
				var _index = $(this).attr("index");
				_eq = _index;
				if (_eq == _lis) {
		       		_eq = 0;
		       		_ul.stop().animate({"margin-left":"-"+_eq*_liwidth},0);
		       	}else if(_eq == (_lis-1)){
		       		_dli.eq(0).addClass("active").siblings().removeClass("active");
		       		_ul.stop().animate({"margin-left":"-"+_eq*_liwidth},500);
		       	}else{
		       		_dli.eq(_eq).addClass("active").siblings().removeClass("active");
		       		_ul.stop().animate({"margin-left":"-"+_eq*_liwidth},500);
		       	}
			}
		}
    }       
});

页面的布局：

<div class="broadcast" id="broadcast">
        <div class = "img-list">
            <ul>
            	<li class="img-1"></li>
            	<li class="img-2"></li>
            	<li class="img-3"></li>
            	<li class="img-4"></li>
            	<li class="img-5"></li>
            	
            	<!--最后一张图片与第一张相同-->
            	<li class="img-1"></li>
            </ul>
        </div>
        <div class = "dot">
        	<ul>
        		<li index = "0" class="active"></li>
        		<li index = "1"></li>
        		<li index = "2"></li>
        		<li index = "3"></li>
        		<li index = "4"></li>
        		<!--最后一张图片与第一张图片重合，设置隐藏的指示灯-->
        		<li index = "5" class = "none"></li>
        	</ul>
        </div>
      	<div class="arrow">
      		<div class="prev"><</div>
      		<div class="next">></div>
      	</div>
    </div>

css部分：

ul li{list-style: none;padding: 0;}
.none{display: none!important;}
.broadcast ul{margin: 0;padding: 0;overflow: hidden;}
.broadcast{position: relative;margin: 0 auto;width: 100%;height: 250px;}
.broadcast:hover>.arrow>div{display: block;}
.broadcast .img-list {overflow: hidden;}
.broadcast .img-list li{float: left;display: inline-block;text-align: center;}
.broadcast .dot{position: absolute;bottom: 10px;left: 0;right: 0;text-align: center;}
.broadcast .dot ul li{width: 15px;height: 15px;border-radius: 50%;background: #999;display: inline-block;cursor: pointer;}
.broadcast .dot ul li.active{background:#333;}
.broadcast .arrow>div{display: none;font-size: 24px;color: #666;position: absolute;top: 0;cursor: pointer;padding: 0 10px;}
.broadcast .arrow>div:hover{background: rgba(0,0,0,0.2);}
.broadcast .arrow .prev{left: 0;}
.broadcast .arrow .next{right: 0;}


/*测试所用背景*/
.broadcast .img-list li.img-1{background: lightcoral;}
.broadcast .img-list li.img-2{background: lightsalmon;}
.broadcast .img-list li.img-3{background: lightslategray;}
.broadcast .img-list li.img-4{background: lightseagreen;}
.broadcast .img-list li.img-5{background: lightblue;}

组件的调用：

$("#broadcast").relayAssembly();