封装轮播插件

以前写网页遇到轮播的时候，要么是引用别人已经封装好的插件（但是别人分装好的存在在很多大量的代码冗余），要么就是慢吞吞的自己写js,有时候写的布局不一样又要从新写一个js，自从我学习咯写封装的juqery方法之后，我就在自己尝试着封装js，这样以后写的时候我直接把他拉过来，然后修改初始默认值就行。

 扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。

;(function($){

    $.fn.Myplugin = function(opitons){
        //设置各种默认的初始值
        var defaults = {
        };
        //合并初始设置
        var settings = $.extend({}, defaults , opitons);
        this.each(function(){


                //写入自己的代码


        });
        return this;
    }
})(jQuery);

这里就是封装插件的框架，现在你就可以往里面添加代码咯。具体的请往我分享的另外一篇文章查看http://blog.csdn.net/chenxi1025/article/details/52222327

下面是我分装的一个简单的轮播图，

html代码：

封装好的js文件：

/* 
* @Author: Lydia
* @Date:   2016-07-25 17:30:07
* @Last Modified by name:   Lydia
* @Last Modified time: 2017-12-20 15:03:39
*/
;(function($){
    //定义插件名称 jquerySlider
    $.fn.jquerySlider = function(options){
        //定义默认设置
        var defaults = {
            auto: true, //是否自动播放
            sliderli:'.slider_main li',
            pagenvali:'.slider_nav li', //分页按钮集合
            active:"active",
            prev: '.slider_pre', //上一页
            next: '.slider_next', //下一页
            actions:"click",
            curren:0,
            times: 3000, //定时器时间
            flag: true //默认从左往右播放
        };


        //可以被拓展的默认设置(通过使用$.extend)
        var options = $.extend({}, defaults, options); //{}这个代表是把defaults 和后面的optinso整合一起返回给你options


        this.each(function(){
            var _this = $(this),
                sliderli = $(options.sliderli,_this),
                pagenvali = $(options.pagenvali,_this),
                interval = null;//定时器


            //分页
            pagenvali.on(options.actions, function(event) {
                event.preventDefault();
                var index = $(this).index();
                $(this).addClass(options.active).siblings(pagenvali).removeClass(options.active);
                sliderli.eq(index).fadeIn().siblings(sliderli).fadeOut();
            });


            //上一页，下一页，注意这里因为是上一页和下一页，记得要打逗号  + “ ，”+
            $(options.prev+','+options.next).on('click',  function(event) {
                event.preventDefault();
                clearInterval(interval);//清除定时器
                $(this).is(options.prev) ? sliderchage(false) : sliderchage(true);
            });


            //hover
            _this.hover(function() {
                clearInterval(interval);
            }, function() {
                autoplay();
            });


            //切换js
            function sliderchage(flag){
                console.log("循环播放")
                if(flag){
                     if(options.curren >= sliderli.length-1){
                        options.curren = 0 ;
                    }else{
                        options.curren++;
                    }
                }else{
                    if(options.curren <= 0){
                        options.curren = sliderli.length-1;
                    }else{
                        options.curren--;
                    }
                }
                pagenvali.eq(options.curren).addClass(options.active).siblings().removeClass(options.active);
                sliderli.eq(options.curren).fadeIn().siblings(sliderli).fadeOut();
            }


            //自动播放
            function autoplay(){
                interval = setInterval(function(){
                        sliderchage(options.flag);
                    }, options.times);
            }


            //是否自动播放
            options.auto ? autoplay():''
        });


        //返回
        return this;    
    }
})(jQuery);

里面可能还有一些精简的方法，还望各位大神指点指点，谢谢！

后期如果有时间的话我会把一些特效添加上，如果以上代码有不足的地方，请到大家及时指出，希望你有所收获