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

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

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

2016-06-01 08:52:23 1628 1

下面是自己写的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);    
    });
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:22:38

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

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

    0 0
相关问答

1

回答

十分钟让网友们学会写Jquery插件:报错

2020-06-09 22:08:09 320浏览量 回答数 1

1

回答

十分钟让网友们学会写Jquery插件:报错

2020-06-10 09:27:25 270浏览量 回答数 1

1

回答

jquery的ajax的返回资源类型没有arraybuffer?

2016-03-25 14:52:03 2556浏览量 回答数 1

1

回答

用jquery的ajax提交表单到servlet参数出现乱码,如何修改?

2016-03-23 18:12:08 1964浏览量 回答数 1

1

回答

jquery ajax和post的问题,两者有什么不同?

2016-03-24 09:06:23 1636浏览量 回答数 1

1

回答

用 jquery ajax 实现点击图片提交form问题

2016-03-24 09:31:02 1656浏览量 回答数 1

1

回答

怎么用jQuery、Ajax、php实现这样的无刷新编辑功能?

2016-03-24 09:33:11 2061浏览量 回答数 1

1

回答

能否使用Jquery优化大量Ajax循环操作?

2016-03-24 09:41:52 1636浏览量 回答数 1

1

回答

jquery $.ajax() 同步与异步区别

2016-03-24 10:29:52 1943浏览量 回答数 1

1

回答

jQuery的$.Ajax() 返回的数据 如何才能保存给全局变量

2016-03-24 10:55:15 4379浏览量 回答数 1
文章
问答
问答排行榜
最热
最新
相关电子书
更多
利用编译将 Vue 组件转成 React 组件
立即下载
JavaScript函数
立即下载
23-Vue.js在前端...1506518547.pdf
立即下载