diff --git a/src/app/img-show/img-show.component.html b/src/app/img-show/img-show.component.html new file mode 100644 index 0000000..b83683a --- /dev/null +++ b/src/app/img-show/img-show.component.html @@ -0,0 +1,13 @@ + + + + \ No newline at end of file diff --git a/src/app/img-show/img-show.component.scss b/src/app/img-show/img-show.component.scss new file mode 100644 index 0000000..b5eaa01 --- /dev/null +++ b/src/app/img-show/img-show.component.scss @@ -0,0 +1,68 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +#carousel { + @apply w-auto h-auto relative overflow-hidden justify-center rounded-2xl flex mx-2 mt-2; +} + +#carousel img { + position: absolute; /* 绝对定位 使图片堆叠 */ + width: auto; /* 设定大小 按比例缩放 */ + height: auto; /* 设定大小 按比例缩放 */ + transition: all .6s; /* 动画 */ + opacity: 0; /* 隐藏 */ +} + +.imgActive { + opacity: 1 !important; /* 显示图片 最高优先级 */ +} + +/* 控制按钮的样式 */ +#leftArrow, +#rightArrow { + //position: absolute; + //left: 5px; + //top: 50%; + //width: 25px; + //height: 30px; + //background-color: #eee; + //display: flex; + //justify-content: center; + //align-items: center; + //opacity: 0.7; + //font-size: 20px; + //cursor: pointer; + //z-index: 1000; + @apply absolute left-5 top-1/2 w-7 h-11 bg-gray-300 flex justify-center items-center opacity-70 text-2xl cursor-pointer z-10; +} + +#rightArrow { + //left: auto; + //right: 5px; + @apply left-auto right-5; +} + +#sliderBtn { + //position: absolute; + //width: 100%; + //bottom: 0; + //display: flex; + //justify-content: flex-end; + //z-index: 1000; + @apply absolute w-full bottom-0 flex justify-end z-10; +} + +.unitBtn { + //width: 10px; + //height: 10px; + //background-color: #eee; + //border-radius: 10px; + //margin: 10px; + //cursor: pointer; + @apply w-4 h-4 bg-gray-300 rounded-full m-2 cursor-pointer; +} + +.btnActive { + background-color: #4C98F7; +} \ No newline at end of file diff --git a/src/app/img-show/img-show.component.ts b/src/app/img-show/img-show.component.ts new file mode 100644 index 0000000..ee4a46d --- /dev/null +++ b/src/app/img-show/img-show.component.ts @@ -0,0 +1,13 @@ +import {Component} from "@angular/core"; +import {RouterLink} from "@angular/router"; + +@Component({ + standalone: true, + selector: 'app-img-show', + templateUrl: './img-show.component.html', + styleUrls: ['./img-show.component.scss'], + imports: [RouterLink], +}) + +export class ImgShowComponent { +} \ No newline at end of file diff --git a/src/assets/ts/image.carousel.ts b/src/assets/ts/image.carousel.ts new file mode 100644 index 0000000..e4cfa0b --- /dev/null +++ b/src/assets/ts/image.carousel.ts @@ -0,0 +1,78 @@ +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