From d7a13106fc91448f0c512542f0ce6d3d7c34ba96 Mon Sep 17 00:00:00 2001 From: myh Date: Fri, 8 Dec 2023 17:43:34 +0800 Subject: [PATCH] delete useless file --- src/assets/ts/image.carousel.ts | 78 --------------------------------- 1 file changed, 78 deletions(-) delete mode 100644 src/assets/ts/image.carousel.ts diff --git a/src/assets/ts/image.carousel.ts b/src/assets/ts/image.carousel.ts deleted file mode 100644 index e4cfa0b..0000000 --- a/src/assets/ts/image.carousel.ts +++ /dev/null @@ -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); // 设置定时器定时切换 -})(); \ No newline at end of file