img-show.component

src/app/img-show/img-show.component.html

@@ -0,0 +1,13 @@
+<!--图片轮播实现-->
+
+<!-- 轮播图容器 -->
+<div id="carousel">
+    <img src="assets/img/anyuse0.png" alt="anyuse6">
+    <img src="/assets/img/anyuse7.png" alt="anyuse7">
+    <img src="/assets/img/anyuse9.png" alt="anyuse9">
+    <img src="/assets/img/anyuse8.png" alt="anyuse8">
+    <!-- 按钮组 -->
+    <div id="leftArrow" class="iconfont icon-arrow-lift"></div> <!-- 左箭头切换按钮 -->
+    <div id="rightArrow" class="iconfont icon-arrow-right"></div> <!-- 右箭头切换按钮 -->
+    <div id="sliderBtn"></div> <!-- 切换按钮组 -->
+</div>

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;
+}

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 {
+}

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); // 设置定时器定时切换
+})();