delete useless file
This commit is contained in:
parent
757d1410de
commit
d7a13106fc
@ -1,78 +0,0 @@
|
|||||||
const imgArr = []; // 图片数组
|
|
||||||
let curIndex = 0; // 当前显示图片
|
|
||||||
let timer = null; // 定时器
|
|
||||||
const btnList = []; // 右下角切换按钮组
|
|
||||||
|
|
||||||
function slide(targetIndex = curIndex + 1) {
|
|
||||||
curIndex = targetIndex % imgArr.length; // 获取当前index
|
|
||||||
imgArr.forEach((v) => v.className = ""); // 设置其他图片隐藏
|
|
||||||
imgArr[curIndex].className = "imgActive"; // 设置当前index图片显示
|
|
||||||
btnList.forEach(v => v.className = "unitBtn") // 设置其他按钮为灰色
|
|
||||||
btnList[curIndex].className = "unitBtn btnActive"; // 设置当前按钮为蓝色
|
|
||||||
}
|
|
||||||
|
|
||||||
function createBtnGroup(carousel: HTMLElement, config: { height?: string; interval: any; }) {
|
|
||||||
document.getElementById("leftArrow").addEventListener('click', (e) => {
|
|
||||||
clearInterval(timer); // 清除定时器,避免手动切换时干扰
|
|
||||||
slide(curIndex - 1); // 允许点击则切换上一张
|
|
||||||
timer = setInterval(() => {
|
|
||||||
slide()
|
|
||||||
}, config.interval); // 重设定时器
|
|
||||||
})
|
|
||||||
document.getElementById("rightArrow").addEventListener('click', (e) => {
|
|
||||||
clearInterval(timer); // 清除定时器,避免手动切换时干扰
|
|
||||||
slide(curIndex + 1); // 允许点击则切换下一张
|
|
||||||
timer = setInterval(() => {
|
|
||||||
slide()
|
|
||||||
}, config.interval); // 重设定时器
|
|
||||||
})
|
|
||||||
const sliderBtn = document.getElementById("sliderBtn"); // 获取按钮容器的引用
|
|
||||||
imgArr.forEach((v, i) => {
|
|
||||||
let btn = document.createElement("div"); // 制作按钮
|
|
||||||
btn.className = i === 0 ? "unitBtn btnActive" : "unitBtn"; // 初设蓝色与灰色按钮样式
|
|
||||||
btn.addEventListener('click', (e) => {
|
|
||||||
clearInterval(timer); // 清除定时器,避免手动切换时干扰
|
|
||||||
slide(i); // // 允许点击则切换
|
|
||||||
timer = setInterval(() => {
|
|
||||||
slide()
|
|
||||||
}, config.interval); // 重设定时器
|
|
||||||
})
|
|
||||||
btnList.push(btn); // 添加按钮到按钮组
|
|
||||||
sliderBtn.appendChild(btn); // 追加按钮到按钮容器
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function eventDispose(carousel: HTMLElement, config: { height?: string; interval: any; }) {
|
|
||||||
document.addEventListener('visibilitychange', function () { // 浏览器切换页面会导致动画出现问题,监听页面切换
|
|
||||||
if (document.visibilityState == 'hidden') clearInterval(timer); // 页面隐藏清除定时器
|
|
||||||
else timer = setInterval(() => {
|
|
||||||
slide()
|
|
||||||
}, config.interval); // 重设定时器
|
|
||||||
});
|
|
||||||
carousel.addEventListener('mouseover', function () { // 鼠标移动到容器则不切换动画,停止计时器
|
|
||||||
clearInterval(timer); // 页面隐藏清除定时器
|
|
||||||
});
|
|
||||||
carousel.addEventListener('mouseleave', function () { // 鼠标移出容器则开始动画
|
|
||||||
timer = setInterval(() => {
|
|
||||||
slide()
|
|
||||||
}, config.interval); // 重设定时器
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
(function start() {
|
|
||||||
const config = {
|
|
||||||
height: "640px", // 配置高度
|
|
||||||
interval: 5000 // 配置轮播时间间隔
|
|
||||||
};
|
|
||||||
const carousel = document.getElementById("carousel"); //获取容器对象的引用
|
|
||||||
carousel.style.height = config.height; // 将轮播容器高度设定
|
|
||||||
document.querySelectorAll("#carousel img").forEach((v, i) => {
|
|
||||||
imgArr.push(v); // 获取所有图片组成数组
|
|
||||||
v.className = i === 0 ? "imgActive" : "";
|
|
||||||
});
|
|
||||||
eventDispose(carousel, config); // 对一些浏览器事件处理
|
|
||||||
createBtnGroup(carousel, config); // 按钮组的处理
|
|
||||||
timer = setInterval(() => {
|
|
||||||
slide()
|
|
||||||
}, config.interval); // 设置定时器定时切换
|
|
||||||
})();
|
|
Loading…
Reference in New Issue
Block a user