JQuery插件--简单轮播器

【1】图片上下轮播  

       【1.1】Html 代码

       【1.2】CSS样式

 #icarousel>.content{
	position: relative;
	top:0px;
	list-style: none;
	width: 100%;
	height: 100%;
    background: green;
}  
#icarousel>.content>.item{
    width: 100%;
	height: 100%;
}
#icarousel>.content img{
	width: 100%;
	height: 100%;
}
/*轮播器提示点*/
#icarousel>.dot{
	position: absolute;
	bottom:10px;left: 50%;
	overflow: hidden;
	list-style: none;
   -webkit-transform: translate(-50%, -50%);/*盒子居中*/
   -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);	
}
#icarousel>.dot>li{
	float: left;
	display: block;
	margin: 0 5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(250,250,250,0.4);
}
li.hover{
	background: red !important; 
}
#icarousel>.left,#icarousel>.right{
	position: absolute;
	top: 50%;
	margin-top: -35px;
	font-size: 60px;
	line-height: 70px;
	color:rgba(160, 173, 160, 0.57);
	box-sizing: border-box;
}

   【1.3】插件代码

;(function($,window,document,undefined){
    $.fn.CarouselToH = function(options){
    	var height=this.height();
    	var defaults = {
            sel:'.content',
            selDot:'.dot>li',
            dotEvent:'click',
        }
        var options = $.extend(true,defaults,options);
        this.find(options.selDot).on(options.dotEvent,function(){
        	_this=$(this);
        	_this.addClass('hover').siblings().removeClass('hover');
        	_this.parent().prev().stop().animate({top:-_this.index()*height+"px"},500);
        });
    } 
    $.fn.CarouselToW = function(options){
    	var width=this.width();
    	var defaults = {
            sel:'.content',
            selDot:'.dot>li',
            dotEvent:'click',
        }
        var options = $.extend(true,defaults,options);
        this.find(options.selDot).on(options.dotEvent,function(){
        	_this=$(this);
        	_this.addClass('hover').siblings().removeClass('hover');
        	_this.parent().prev().stop().animate({left:-_this.index()*width+"px"},500);
        });
    }    
})(jQuery,window,document);