jQuery图片轮播插件

;(function($){
    $.fn.slider=function(options){
        var defaults={
            autoScroll:true,//是否自动滚动
            spend:2000,//运动速度值 
            numControl:false,    //页码数字
            arrowControl:false    //左右滑按钮
        }
        var settings=$.extend({},defaults,options),
            slider=$(this),
            ul=slider.find('ul'),
            li=ul.find('li'),
            img=li.find('img'),
            width=slider.width(),
            height=slider.height(),
            len=li.length,
            timer=null,
            index=0;
            console.log(img)
            img.add(li).css({width:width,height:height})    //li和img的宽高
            ul.css({
                width:width*len,
                height:height
            })
            if(settings.autoScroll){
                //开始滚动
                timer=setInterval(pic,settings.spend)
            }
            if(settings.numControl){
                // 如果数字为true，就添加数字
                slider.append("<div id='num'></div>")    //创建id为num的div
                for(var i=0;i<len;i++){    //创建跟图片一样多的数字
                    slider.find('#num').append("<span>"+(i+1)+"</span>")
                    // find() 方法获得当前元素集合中每个元素的后代
                }
                slider.find('#num span').eq(0).addClass('active')
                slider.find('#num span').on('mouseover',function(){    //鼠标放到某个数字上
                    slider.find('#num span').eq($(this).index()).addClass('active').siblings().removeClass("active")    //给某个数字加css样式，其余的清空样式
                    index=slider.find('#num span').index($(this))
                    showPic(index)
                })
            }
            if(settings.arrowControl){
                // 如果按钮为true
                slider.append("<span class='left'></span><span class='right'></span>")
                var prev=slider.find('.left')
                var next=slider.find('.right')
                prev.on('click',function(){
                    index-=1
                    if(index==-1)index=len-1
                    showPic(index)
                })
                next.on('click',function(){
                    index+=1
                    if(index==len)index=0
                    showPic(index)
                })
            }
            function pic(){
                ///用来定义index值
                index++;
                if(index==len)index=0
                showPic(index)
                console.log(index)
            }
            function showPic(index){
                //图片动起来
                ul.animate({
                    left:-index*width
                })
                slider.find('#num span').eq(index).addClass('active').siblings().removeClass('active')    //数字的颜色随着图片而动
            }
            slider.on('mouseover',function(){
                //移上时停止定时器
                clearInterval(timer)
            })
            slider.on('mouseout',function(){
                // 移出滚动
                if(settings.autoScroll){
                    //开始滚动
                    timer=setInterval(pic,settings.spend)
                }
            })
        return this
    }
})(jQuery)