怎么将jquery函数编程封装成插件形式?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

怎么将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);    
    });

展开
收起
小旋风柴进 2016-06-01 08:52:23 1670 0
1 条回答
写回答
取消 提交回答
  • 小旋风柴进

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

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

    2019-07-17 19:22:38
    赞同 展开评论 打赏
问答标签:
相关产品:
问答排行榜
最热
最新
相关电子书
更多
利用编译将 Vue 组件转成 React 组件
立即下载
编程语言如何演化—— 以 JS 的 private 为例
立即下载
编程语言如何演化-以JS的private为例
立即下载