首页 > 怎么将jquery函数编程封装成插件形式?

怎么将jquery函数编程封装成插件形式?

下面是自己写的jQuery无缝连接图的源代码,想将它封装成插件,看了一些文章还不是很清楚,希望大神讲解修改的原理、核心和思想。

$(function () {
    var stage=$('.pic-stage');
    var pic=$('.pic-box');
    //克隆元素并插入到图片容器的末尾
    pic.append($('.pic-box li').first().clone());
    var picLi=$('.pic-box li');
    var btn=$('.btn');
    //获取单张图片的大小
    var picWidth=parseInt(picLi.eq(0).css('width'));
    //获取图片的个数
    var size=picLi.size();
    //根据图片个数添加导航菜单的li
    var panel=$('.panel');
    for (var i=0;i<size-1;i++){
        panel.append('<li></li>');
    }
    var panelLi=$('.panel li');
    //设置当前图片索引
    var iNow=0;
    pic.css('width',picWidth*size);
    panelLi.first().addClass('active');
    //导航条事件
        panelLi.hover(function() {
        iNow=$(this).index();
        $(this).addClass('active').siblings().removeClass('active');
        pic.stop().animate({left:(-iNow*picWidth)+'px'});    
    });

    //向左的按钮
    btn.eq(0).click(function() {
        iNow--;
        if (iNow===-1) {
            pic.css('left',-(size-1)*picWidth);
            iNow=size-2;
        }
        pic.stop().animate({left:(-iNow*picWidth)+'px'});
        if (iNow===-1) {
            panelLi.eq(size-1).addClass('active').siblings().removeClass('active');
        } else {
            panelLi.eq(iNow).addClass('active').siblings().removeClass('active');
        }
        
    });
    //向右的按钮
    btn.eq(1).click(function() {
        iNow++;
        if (iNow===size) {
            pic.css('left','0px');
            iNow=1;
        }
        pic.stop().animate({left:(-iNow*picWidth)+'px'});
        if (iNow===size-1) {
            panelLi.eq(0).addClass('active').siblings().removeClass('active');
        }else(
            panelLi.eq(iNow).addClass('active').siblings().removeClass('active')
        );
        
    });
    //自动播放函数,与向右按钮事件函数一致,用trigger触发
    function autoPlay(){
        btn.eq(1).trigger('click');
    }
    var timer=setInterval(autoPlay,2000);

    //鼠标悬浮停止定时器
    stage.hover(function() {
        clearInterval(timer);
    }, function() {
    //这里注意要timer指向定时器,否则后面的定时器无法清除
        timer=setInterval(autoPlay,2000);    
    });

});

首先你得把参数抽象出来,代码里引用了这么多直接的类名是不是可以抽象成参数?还有其它一些可配置的数据是否可以抽象成参数?

然后就是考虑执行的主体,是 $ 还是 $.fn,扩展 $ 是表态方法,扩展 $.fn 是实例方法。

【热门文章】
【热门文章】