鹤鹤轮播插件1.6.1
此插件为初级版本，时刻保持更新
插件介绍：
此插件可以直接生成轮播图，参数可调，内容自适应，轮播图可自由嵌套，使用起来相对便捷
语法：
new Hehelunbo("id名",{参数})
元素按照contianer => wrapper => slider结构布局，传入container的id
参数：
[item] [true or false] left 是否加入左箭头 right 是否加入右箭头 autoplay 是否自动播放 seamless 是否无缝轮播 dot 是否加入小圆点 *fade*是否淡入淡出(默认滑动)(待开发)例：
new Hehelunbo("container", { left: true, right: true, autoplay: false, seamless: true, dot: true })
具体实现：
export default class Hehelunbo {
constructor(id, parameter) { // parameter:参数
this.container = document.getElementById(id);
this.wrapper = this.container.firstElementChild;
this.slider = this.wrapper.children;
this.parameter = parameter;
this.parameter.seamless = true; // 直接开启无缝轮播
this.bool = true; // 点击锁
// 获取计算后的轮播图宽高
this.sliderWidth = parseInt(document.defaultView.getComputedStyle(this.slider[0]).width);
this.sliderHight = parseInt(document.defaultView.getComputedStyle(this.slider[0]).height);
this.index = this.parameter.seamless === true ? 1 : 0; // 根据是否无缝轮播决定初始位置
this.init();
}
init() {
// document.preventDefault(this.container);
this.container.style.position = "relative";
this.container.style.overflow = "hidden";
Object.assign(this.wrapper.style, {
position: "absolute",
transition: "left 1s",
left: - this.index * this.sliderWidth + "px" // 初始显示第一张图
})
this.parameter.seamless === true ? this.cloneNode() : ""; // 是否无缝轮播
for (let i = 0; i < this.slider.length; i++) {
this.slider[i].style.position = "absolute";
this.slider[i].style.left = this.sliderWidth * i + "px";
}
this.addEventElement(); // 插入元素 是否加入左右箭头、小圆点
this.bindEvent();
this.autoBool = this.parameter.autoplay === true ? true : false ; // 加入autoBool 避免自动播放与点击冲突
this.autoBool === true ? this.autoplay() : ""; // 是否自动播放
this.parameter.dot === true ? this.autoDot() : ""; // 是否自动切换小圆点
}
cloneNode() {
let firstChild = this.wrapper.firstElementChild.cloneNode(true);
let lastChild = this.wrapper.lastElementChild.cloneNode(true);
this.wrapper.appendChild(firstChild);
this.wrapper.prepend(lastChild);
}
addEventElement() {
if (this.parameter.left === true) {
let div = document.createElement("div");
Object.assign(div.style, {
position: "absolute",
width: "41px",
height: "69px",
left: "20px",
zIndex: "999",
top: this.sliderHight / 2 - 35 + "px",
borderRadius: "3px",
background: 'url(https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png)', // 偷小米图 解决依赖本地图片
backgroundPosition: "82px 0px"
})
div.id = this.container.id + "-heheLeft"
this.container.appendChild(div);
}
if (this.parameter.right === true) {
let div = document.createElement("div");
Object.assign(div.style, {
position: "absolute",
width: "41px",
height: "69px",
right: "20px",
zIndex: "999",
top: this.sliderHight / 2 - 35 + "px",
borderRadius: "3px",
background: 'url(https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png)',
backgroundPosition: "41px 0px"
})
div.id = this.container.id + "-heheRight"
this.container.appendChild(div);
}
if (this.parameter.dot === true) {
let ul = document.createElement("ul");
Object.assign(ul.style, {
position: "absolute",
padding: "0",
// 动态计算长度使小圆点居中
left: this.sliderWidth / 2 - 12.5 * parseInt([].slice.call(this.wrapper.children).length) + "px",
// left: this.sliderWidth / 2 - 17 * this.wrapper.children.length + "px",
bottom: "20px",
listStyle: "none"
})
ul.id = this.container.id + "-dot";
this.container.appendChild(ul);
for (let i = 1; i < this.slider.length - 1; i++) { // 因为是无缝轮播 所以i值掐头去尾
let li = document.createElement("li");
Object.assign(li.style, {
width: "16px",
height: "16px",
border: "1px solid #ccc",
borderRadius: "50%",
position: "absolute",
left: i * 25 + "px",
})
li.index = i;
li.className = this.container.id + i + "";
ul.appendChild(li);
}
}
}
bindEvent() {
this.left = this.parameter.left === true ?
document.getElementById(this.container.id + "-heheLeft") :
"";
this.right = this.parameter.right === true ?
document.getElementById(this.container.id + "-heheRight") :
"";
this.dotMom = this.parameter.dot === true ?
document.getElementById(this.container.id + "-dot") :
"";
if (this.left) {
this.left.addEventListener("mousedown", () => this.prev());
this.left.addEventListener("mouseenter", e => this.deepColor(e));
this.left.addEventListener("mouseout", e => this.deepColor(e));
}
if (this.right) {
this.right.addEventListener("mousedown", () => this.next());
this.right.addEventListener("mouseenter", e => this.deepColor(e))
this.right.addEventListener("mouseout", e => this.deepColor(e))
}
this.dotMom ? this.dotMom.addEventListener("mousedown", e => this.mouseHandler(e)) : "";
this.parameter.autoplay === true ? this.container.addEventListener("mouseover", e => this.setAuto(e)) : ""; // 鼠标进入暂停自动轮播
this.parameter.autoplay === true ? this.container.addEventListener("mouseout", e => this.setAuto(e)) : "";
}
deepColor(e) {
switch (e.type) {
case "mouseenter": {
e.target.style.backgroundPosition = e.target.id === this.container.id + "-heheLeft" ? "0px 0px" : "-42px 0px";
}; break;
case "mouseout": {
e.target.style.backgroundPosition = e.target.id === this.container.id + "-heheLeft" ? "82px 0px" : "42px 0px";
}
}
}
next() {
if (this.bool === true) {
this.bool = false;
this.index++;
if (this.index === this.slider.length - 1) {
let timer = setTimeout(() => {
this.wrapper.style.transition = "top 1s";
this.index = 1;
this.wrapper.style.left = - this.sliderWidth * this.index + "px";
}, 1000);
}
this.wrapper.style.left = - this.sliderWidth * this.index + "px";
this.wrapper.style.transition = "left 1s";
let timer = setTimeout(() => {
this.bool = true;
this.parameter.dot === true ? this.autoDot() : "";
clearTimeout(timer);
}, 1000);
// if (this.autoplay === true) { // 解决自动播放和手动播放的冲突 (已解决
// clearInterval(this.autoTimer);
// this.autoTimer = setInterval(() => {
// this.bool === true ? this.next() : "";
// }, 4000)
// }
}
}
prev() {
if (this.bool === true) {
this.bool = false;
this.index--;
if (this.index === 0) {
setTimeout(() => {
this.wrapper.style.transition = "top 1s";
this.index = this.slider.length - 2;
this.wrapper.style.left = - this.sliderWidth * this.index + "px";
}, 1000);
}
this.wrapper.style.left = - this.sliderWidth * this.index + "px";
this.wrapper.style.transition = "left 1s";
let timer = setTimeout(() => {
this.bool = true;
this.parameter.dot === true ? this.autoDot() : "";
clearTimeout(timer);
}, 1000);
}
}
mouseHandler(e) {
[].slice.call(this.dotMom.children).forEach(element => { // 初始化小圆点
element.style.backgroundColor = "";
});
this.index = e.target.index;
this.wrapper.style.left = - this.sliderWidth * this.index + "px";
e.target.style.backgroundColor = "#8888";
}
autoplay() {
this.autoTimer = setInterval(() => {
// console.log(this.bool)
this.autoBool === true ? this.next() : "";
}, 4000)
}
setAuto(e) {
switch (e.type) {
case "mouseover": {
this.autoBool = false;
}; break;
case "mouseout": {
this.autoBool = true;
}
}
}
autoDot() {
[].slice.call(this.dotMom.children).forEach(element => { // 初始化小圆点
element.style.backgroundColor = "";
});
this.dotMom.children[this.index - 1].style.backgroundColor = "#8888";
}
}
网友评论