教你开发jQuery幻灯片插件

最近在学习jquery插件的开发，也看了很多Demo. 各种jquery的插件所用到的设计模式也是不同。

• 插件功能（依赖jquery）
  （无缝图片滚动）
  点击上一个，下一个
  鼠标移入移出效果，以及清除定时器等
• 说明：
  事先约定好html结构，当然也可以自己制定html结构

1.DOM结构（父容器为m-carousel）

<div class="mytest">
    <div class="m-carousel">
        <div class="m-carousel-inner">
            <div class="item">
                <img src="images/1.png">
            </div>
            <div class="item" style="left: 310px;">
                <img src="images/2.png">
            </div>
            <div class="item" style="left: 310px;">
                <img src="images/3.png">
            </div>
            <div class="item" style="left: 310px;">
                <img src="images/4.png">
            </div>
            <div class="item" style="left: 310px;">
                <img src="images/5.png">
            </div>
        </div>
        <a class="btn-prev">
            <
        </a>
        <a class="btn-next">
            >
        </a>
    </div>
</div>

2.Mcarousel.js

## Mcarousel.js ##
/**
 * Created by Administrator on 2016/10/21 0021.
 */

+(function($){
    'use strict';
    var mCarousel=function(ele,opt){
        this.defaults={
            elenext:'',
            eleprev:'',
            //图片数量
            imgcount:$(ele).find(".item").length,
            intervaltime:3000,
            durationtime:500

        }
        this.options= $.extend({},this.defaults,opt);
        this.$element=$(ele).find(".item");
        //移动的宽度
        this.moveWidth=$(ele).width();
        //父容器
        this.$contentele=$(ele);
        //计时器
        this.interval=null;
        //imageNow
        this.imageNow=0;
        //防止快速点击按钮
        this.couldRun=true;
    };

    mCarousel.prototype={

        //程序初始化函数
        init:function(){
            var that=this;
            //console.log(this.defaults.imgcount);
            //绑定右按钮事件
            $(that.options.elenext).on('click',function(){
                //console.log(that.imageNow);
                if(that.couldRun){
                    that.couldRun=false;
                    that.mover();
                    setTimeout(function(){
                        that.couldRun=true;
                    },that.options.durationtime)
                }

            });
            //绑定左按钮事件
            $(that.options.eleprev).on('click',function(){
                if(that.couldRun){
                    that.couldRun=false;
                    that.movel();
                    setTimeout(function(){
                        that.couldRun=true;
                    },that.options.durationtime)
                }
            })
            //设置定时器
            this.interval=setInterval(function(){
                that.mover()
            },that.options.intervaltime);
            //当鼠标移入容器时清除定时器
            $(that.$contentele).on("mouseover",function(){
                clearInterval(that.interval);
            });

            //当鼠标移开容器时设置定时器
            $(that.$contentele).on("mouseleave",function(){
                that.interval=setInterval(function(){
                    that.mover()
                },that.options.intervaltime);
            });
        },
        /*向左移动 右按钮*/
        mover:function(){
            this.$element.eq(this.imageNow).animate({
                "left":-(this.moveWidth)
            },500);
            var count=this.options.imgcount;
            this.imageNow=(this.imageNow+1)%count;
            console.log(this.$element);
            this.$element.eq(this.imageNow).css({
                "left":this.moveWidth+"px"
            });
            this.$element.eq(this.imageNow).animate({
                "left":0
            },500)
        },

        /*向右移动 左按钮*/
        movel:function(){
            this.$element.eq(this.imageNow).animate({
                "left":this.moveWidth
            },500);
            var count=this.options.imgcount;
            this.imageNow=(this.imageNow+ count -1)%count;
            console.log(this.$element);
            this.$element.eq(this.imageNow).css({
                "left":-(this.moveWidth)+"px"
            });
            this.$element.eq(this.imageNow).animate({
                "left":0
            },500)
        },

    }
    /*把对象引入到jquery中*/
    $.fn.mCol=function(opt){
        var mcarousel=new mCarousel(this,opt);
        mcarousel.init();
        return this;
    }
})(jQuery)

3.使用方法：

  $(".m-carousel").mCol({
        elenext:'.btn-next',//左按钮
        eleprev:'.btn-prev',//右按钮
        intervaltime:1000,//定时器时间
        durationtime:500  //动画过度时间
    });

完整demo：
个人的github项目地址：插件Mcarousel

效果图：