interface CarouselOptions {
     range?: number, // 每次移动的距离，默认一个item宽度
     itemTag?: string, // 子代的标签
     boxTag?: string, // 盒子的标签
     spaceTime?: number, // 停顿的时间
     animationTime?: string|number, // 动画执行时间
     animationMode?: string, // 动画效果
     previousTag?: string, // 可点击向前的元素
     nextTag?: string, // 可点击向后的元素
     thumbMode?: string // 缩略图模式
}

1234567891011

class CarouselDefaultOptions implements CarouselOptions {
     itemTag: string = 'li';
     boxTag: string = '.carousel-box';
     spaceTime: number = 3000;
     animationTime: string|number = 1000;
     animationMode: string = "swing";
     previousTag: string = '.carousel-previous';
     nextTag: string = '.carousel-next';
}

12345678910

/// 
class Carousel {
    constructor(
        public element: JQuery,
        options?: CarouselOptions
    ) {
        this.options = $.extend({}, new CarouselDefaultOptions(), options); // 合并参数
        this._init(); // 初始化，包括长度不足循环补足
        this._addEvent(); // 绑定事件
    }

    // 下一张
    public next(range: number = this.options.range) {
        this.goLeft(this._left - range);
    }

    // 上一张
    public previous(range: number = this.options.range) {
        this.goLeft(this._left + range);
    }
}

123456789101112131415161718192021

;(function($: any) {
    $.fn.carousel = function(options ?: CarouselOptions) {
        return new Carousel(this, options); 
    };
})(jQuery);

12345