思路
- 可以接受的参数
- 默认的参数
- 类
- 挂载在
JQuery上
步骤
- 参数接口
配置的接口，在js中无用，这里只是为了以后 TS 使用方便，方便智能提示和书写，
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
- 挂载在
JQuery上
;(function($: any) {
$.fn.carousel = function(options ?: CarouselOptions) {
return new Carousel(this, options);
};
})(jQuery);12345
--- 用typescript 写 js 一目了然
转载请保留原文链接： https://zodream.cn/blog/id/10.html