共计 2327 个字符，预计需要花费 6 分钟才能阅读完成。
// 匿名函数自执行
(function() {
function Carsouel(json) {
// 外层的盒子
this.$dom = $(“#”+json.id);
// ul
this.$ul = null;
// ul 下面所有的 li
this.$ullis = null;
// 左侧按钮
this.$left = null;
// 右侧按钮
this.$right = null;
this.$ol = null;
this.$ollis = null;
// 添加一个控制变量
this.idx = 0;
// 动画时间
this.animateTime = json.animateTime;
// 盒子宽高
this.width = json.width;
this.height = json.height;
// 图片数组属性
this.imgArr = json.images;
// 图片数组长度
this.imgArrLength = json.images.length;
// 初始化
this.init();
// 事件监听
this.bindEvent();
}
Carsouel.prototype.init = function() {
this.$ul = $(“<ul></ul>”);
for(var i=0; i<this.imgArr.length; i++) {
this.$ul.append($(“<li><img src='”+this.imgArr[i]+”‘></li>”));
}
this.$dom.append(this.$ul);
// 拿到 ul 下的所有 li
this.$ullis = this.$ul.find(“li”);
// 最外层盒子的 css
this.$dom.css({
“position”:”relative”,
“width”: this.width,
“height”: this.height,
“margin”: “0 auto”,
“border”: “1px solid gray”,
“overflow”: “hidden”
});
// ul 的 css
var _this = this;
this.$ul.css({
“position”:”absolute”,
“width”: _this.width,
“height”: _this.height
});
// ul 的 li 的 css
this.$ullis.css({
“position”:”absolute”,
“left”:_this.width
});
// 单独设置默认第一张图片
this.$ullis.eq(0).css({
“left”: 0
});
// 初始化左右按钮
this.$left = $(“<a class=’left’><</a>”);
this.$right = $(“<a class=’right’>></a>”);
this.$dom.append(this.$left);
this.$dom.append(this.$right);
// 初始化下面 ol
this.$ol = $(“<ol class=’circle’></ol>”);
for(var i=0; i<this.imgArr.length; i++) {
this.$ol.append($(“<li></li>”));
}
this.$dom.append(this.$ol);
// 拿到 ol 下的所有 li
this.$ollis = this.$ol.find(“li”);
this.$ol.css({
“position”:”absolute”,
“bottom”: 10,
“left”: 400,
“list-style”:”none”
});
// ol 的 li 的 css
this.$ollis.css({
“float”: “left”,
“width”: 50,
“height”: 50,
“margin-left”:10
});
this.$ollis.eq(0).addClass(“active”);
}
Carsouel.prototype.bindEvent = function() {
var _this = this;
// 左侧按钮
this.$left.click(function() {
_this.$ullis.eq(_this.idx).animate({“left”:_this.width},_this.animateTime);
_this.idx++;
if (_this.idx > _this.imgArrLength-1) {
_this.idx = 0;
}
_this.$ullis.eq(_this.idx).css({
“left”:-_this.width
}).animate({“left”:0},_this.animateTime);
});
// 右侧按钮 自己完成
// 下面的 ol 的 li 事件绑定
this.$ollis.click(function() {
// 点击哪个 显示哪张图片
var old = _this.idx;
var num = $(this).index();
_this.idx = num;
if (num==old) {
return;
}
console.log(num,old);
_this.$ullis.eq(old).css({
“left”: 0
}).animate({“left”:-_this.width},_this.animateTime);
_this.$ullis.eq(num).css({
“left”: _this.width
}).animate({“left”:0},_this.animateTime);
// 对应样式
_this.$ollis.eq(num).addClass(“active”).siblings().removeClass(“active”);
})
}
window.Carsouel = Carsouel;
})();
