(function () {
function Slider(option) {
this.wrap = option.wrap;
this.imgList = option.imgList;
this.imgNum = this.imgList.length;
this.width = option.width || $(this.wrap).width();
this.height = option.height || $(this.wrap).height();
this.isAuto = option.isAuto || true;
this.moveTime = option.moveTime;
this.direction = option.direction || "right";
this.btnWidth = option.btnWidth;
this.btnHeight = option.btnHeight;
this.spanWidth = option.spanWidth;
this.spanHeight = option.spanHeight;
this.spanColor = option.spanColor;
this.activeSpanColor = option.activeSpanColor;
this.btnBackgroundColor = option.btnBackgroundColor;
this.spanRadius = option.spanRadius;
this.spanMargin = option.spanMargin;
this.flag = false;
this.nowIndex = 0;
this.createDom();
this.initStyle();
this.bindEvent();
if (this.isAuto === true) {
this.autoMove();
}
}
Slider.prototype.createDom = function () {
var oUl = $('<ul class="imgList"></ul>');
var Spot = $('<div class="spot"></div>');
this.imgList.forEach(function (item) {
var oLi =
'<li><a href=" ' +
item.a +
'target="_blank" "><img src=" ' +
item.img +
' "></a></li>';
oUl.append(oLi);
var span = "<span></span>";
Spot.append(span);
});
var leftBtn = $(
'<div class="left-btn"><i class="fas fa-angle-left"></i></div>'
);
var rightBtn = $(
'<div class="right-btn"><i class="fas fa-angle-right"></i></div>'
);
this.wrap.append(oUl).append(leftBtn).append(rightBtn).append(Spot);
};
Slider.prototype.initStyle = function () {
$("*", this.wrap).css({ margin: 0, padding: 0, listStyle: "none" });
$(this.wrap).css({ overflow: "hidden", position: "relative" });
$(".imgList", this.wrap).css({
width: this.width,
height: this.height,
position: "relative",
});
$(".imgList li", this.wrap)
.css({
width: this.width,
height: this.height,
position: "absolute",
left: 0,
top: 0,
display: "none",
})
.eq(this.nowIndex)
.css({ display: "block" });
$(".imgList li a, .imgList li a img", this.wrap).css({
display: "inline-block",
width: this.width,
height: this.height,
});
$(".left-btn, .right-btn", this.wrap).css({
width: this.btnWidth,
height: this.btnHeight,
backgroundColor: this.btnBackgroundColor,
color: "#fff",
textAlign: "center",
lineHeight: this.btnHeight + "px",
position: "absolute",
top: "50%",
marginTop: -this.btnHeight / 2,
cursor: "pointer",
});
$(".right-btn", this.wrap).css({ right: 0 });
$(".spot", this.wrap).css({
height: this.spanHeight + this.spanMargin * 2,
position: "absolute",
left: "50%",
marginLeft: (-this.imgNum * (this.spanWidth + this.spanMargin * 2)) / 2,
bottom: 10,
});
$(".spot span", this.wrap)
.css({
display: "inline-block",
width: this.spanWidth,
height: this.spanHeight,
margin: this.spanMargin,
backgroundColor: this.spanColor,
borderRadius: this.spanRadius,
cursor: "pointer",
})
.eq(this.nowIndex)
.css({ backgroundColor: this.activeSpanColor });
};
Slider.prototype.bindEvent = function () {
var self = this;
$(".left-btn", this.wrap).click(function () {
self.move("prev");
});
$(".right-btn", this.wrap).click(function () {
self.move("next");
});
$(".spot span").click(function (e) {
self.move($(this).index());
});
$(this.wrap).mouseenter(function () {
clearInterval(self.time);
});
};
Slider.prototype.move = function (dir) {
if (this.flag) {
return false;
}
this.flag = true;
switch (dir) {
case "prev":
if (this.nowIndex === 0) {
this.nowIndex = this.imgNum - 1;
} else {
this.nowIndex--;
}
break;
case "next":
if (this.nowIndex === this.imgNum - 1) {
this.nowIndex = 0;
} else {
this.nowIndex++;
}
break;
default:
this.nowIndex = dir;
break;
}
var self = this;
$(".imgList li", this.wrap)
.fadeOut()
.eq(this.nowIndex)
.fadeIn(function () {
self.flag = false;
});
$(".spot span", this.wrap)
.css({ backgroundColor: this.spanColor })
.eq(this.nowIndex % this.imgNum)
.css({ backgroundColor: this.activeSpanColor });
};
Slider.prototype.autoMove = function () {
var self = this;
this.time = setInterval(function () {
if (this.direction == "left") {
$(".left-btn", this.wrap).trigger("click");
} else {
$(".right-btn", this.wrap).trigger("click");
}
}, self.moveTime);
};
$.fn.extend({
slider: function (option) {
option.wrap = this;
new Slider(option);
},
});
})();
|
