jq插件处女座 图片轮播

好久没写博客了，变得好懒呀，无地自容。最近一直在学sass和jq插件的写法，照猫画虎的谢了一个jq的插件，也算是第一次真正称得上插件的插件 ，废话不多说 上代码

(function($) {   

    $.fn.carousel = function(options) {     
        if($(this).length==0)return false;
        var opts = $.extend({},$.fn.carousel.defaults,options);
        function Slide(o){
            this.o = o;
            this.box = o.find(opts['imgbox']);
            this.cirEle = this.box.find(opts['cirEle'])
            this.nav = o.find(opts['slideNav']);
            this.rightAr = o.find(opts['rightAr']);
            this.leftAr = o.find(opts['leftAr']);
            this.et = opts['eventType'];
            this.autoPlay = opts['autoPlay'];
            this.navClass = opts['navClass'];
            this.speed = opts['speed']
            this.timer = null;
            this.len = this.cirEle.length;
            this.cirNavEle = null;
            this.onOff = true;
            this.activeIndex = 0;
            this.iNow = 0;
            this.boxWidth = this.box.outerWidth()

        }

        Slide.prototype.init = function(){
            var _this = this;
            _this.createNav().togglePage();
            this.leftAr.on('click',function(){
                _this.play(1);
                
            })
            this.rightAr.on('click',function(){
                _this.play();
            })

            if(this.autoPlay){
                this.stop();
                this.timer = setInterval(function(){
                    _this.play();
                },this.speed[1]);

                this.o.hover(function(){
                    _this.stop();
                },function(){
                    _this.timer = setInterval(function(){
                        _this.play();
                    },_this.speed[1])
                })
                
            }
        }
        Slide.prototype.createNav = function(){
            var _this = this;
            var arr = [];
            $.each(_this.cirEle,function(i,n){
                if(i == 0){
                    arr.push('<span class="cur">'+ (i+1) +'</span>');
                }else{                   
                    arr.push('<span>'+ (i+1) +'</span>');
                     _this.cirEle.eq(i).css({'left':_this.boxWidth});
                }

            });

            _this.nav.html(arr.join(''));
            this.cirNavEle = _this.nav.find('span');
            return this;

        }
        Slide.prototype.togglePage = function(){
            var _this = this;
            this.cirNavEle.on(_this.et,function(){
                if(_this.onOff){
                    _this.onOff = false;
                    
                    _this.activeIndex = $(this).index(); 
                    
                    $(this).addClass(_this.navClass).siblings().removeClass(_this.navClass);              
                
                    if(_this.activeIndex > _this.iNow){
                        _this.toggleRight();
                        
                    }else if( _this.activeIndex < _this.iNow ){
                        _this.toggleLeft();
                    } 
                    _this.cirEle.eq(_this.activeIndex).animate({'left':0},_this.speed[0],function(){                       
                           _this.onOff = true;
                           $(this).css({'z-index':1}).siblings().css({'z-index':0})
                    })
                    
                    _this.iNow = _this.activeIndex;
                }
            })

            return this;
            

        }
        Slide.prototype.toggleLeft= function(){
            var _this = this;
            _this.cirEle.eq(_this.activeIndex).css({'left':-_this.boxWidth})                       
            _this.cirEle.eq(_this.iNow).animate({'left':_this.boxWidth},_this.speed[0])
        }
         Slide.prototype.toggleRight= function(){
             var _this = this;
            _this.cirEle.eq(_this.activeIndex).css({'left':_this.boxWidth})                        
            _this.cirEle.eq(_this.iNow).animate({'left':-_this.boxWidth},_this.speed[0])
        }
        
        Slide.prototype.play = function(dir){
            var _this = this;
            if(_this.onOff){
                _this.onOff = false;
                if(!dir){
                    _this.activeIndex++;
                    _this.activeIndex %= _this.len;
                    _this.toggleRight();
                   
                }else{
                    _this.activeIndex--;
                    if(_this.activeIndex <= 0){
                        _this.activeIndex = 0;
                    }
                    _this.toggleLeft();
                   
                }  

                _this.cirEle.eq(_this.activeIndex).animate({'left':0},_this.speed[0],function(){                       
                        _this.onOff = true;
                        _this.iNow = _this.activeIndex;
                        _this.cirNavEle.eq(_this.activeIndex).addClass(_this.navClass).siblings().removeClass(_this.navClass); 
                        $(this).css({'z-index':1}).siblings().css({'z-index':0})  
                })
               
            }

        }
        Slide.prototype.stop = function(){
            clearInterval(this.timer);
        }


        return this.each(function () {
               var $this = $(this);
               var obj = new Slide($this);
               obj.init();
        });

    };     



    //默认配置
    $.fn.carousel.defaults = {
        'imgbox' : '.carousel-box',     //滚动元素父容器
        'cirEle' : 'li',              //滚动元素
        'slideNav' : '.carousel-nav',    //图片索引菜单
        'autoPlay' : true,                //是否自动轮播
        'rightAr' : '.arR',                //下一张
        'leftAr' : '.arL',                //上一张
        'speed':[500,3000],                //速度  一张显示出来的时间， 间隔时间
        'eventType' : 'click',            //切换方式
        'navClass' : 'cur'                //当前菜单高亮css

    }
})(jQuery); 

 

HTML

<div class="area">
    <div class="carousel-box">
        <ul>
            <li><a href="#1"><img src="images/1.jpg" alt=""></a></li>
            <li><a href="#2"><img src="images/2.jpg" alt=""></a></li>
            <li><a href="#3"><img src="images/3.jpg" alt=""></a></li>
            <li><a href="#4"><img src="images/4.jpg" alt=""></a></li>
            <li><a href="#5"><img src="images/5.jpg" alt=""></a></li>
            <li><a href="#6"><img src="images/6.jpg" alt=""></a></li>
            <li><a href="#7"><img src="images/7.jpg" alt=""></a></li>
        </ul>
    </div>
    <div class="carousel-nav"></div>
    <span class="arL">&lt;</span>
    <span class="arR">&gt;</span>    
    
</div>
<script>
    $(function(){
        $('.area').carousel();
    })
</script>

css

.area, .area .carousel-box {
  width: 310px; }

.area .carousel-nav span, .area .arR, .area .arL {
  width: 20px;
  height: 20px;
  border: 1px solid #666;
  text-align: center;
  display: inline-block; }

.area .carousel-box ul, .area .carousel-box li {
  position: absolute;
  left: 0;
  top: 0; }

.area {
  margin: 50px auto; }
  .area .carousel-box {
    height: 350px;
    overflow: hidden;
    position: relative; }
  .area .carousel-nav span.cur {
    background: #000;
    color: #FFF; }
  .area .arR, .area .arL {
    margin-top: 20px; }

 

现在回头想想，其实jq插件并不是想象的那么的难，难的还是在实现功能的思路上，写法和平常js也都差不多，上面现在只是简单的实现左右轮播，有时间把上下方向也加上，嘎嘎