Image carousel effect

src/html/ynu.html

@@ -25,12 +25,26 @@
         <div class="hover:text-red-300">English</div>
     </div>
     
-    <div>
+    <!--    <div>-->
-        <div class="w-full h-fit mt-1 relative">
+    <!--        <div class="w-full h-fit mt-1 relative">-->
-            <div class="w-full h-screen relative flex z-0" id="slider-wrapper">
+    <!--            <div class="w-full h-screen relative flex z-0" id="slider-wrapper">-->
-                <img class="z-0 object-cover w-full" id="img1" src="../../img/anyuse0.png" alt="">
+    <!--                <img class="z-0 object-cover w-full" id="img1" src="../../img/anyuse0.png" alt="">-->
-            </div>
+    <!--            </div>-->
-        </div>
+    <!--        </div>-->
+    <!--    </div>-->
+    
+    <!--图片轮播实现-->
+    <script src="../ts/slider.ts" defer></script>
+    <!-- 轮播图容器 -->
+    <div id="carousel">
+        <img src="../../img/anyuse0.png" alt="anyuse6">
+        <img src="../../img/anyuse7.png" alt="anyuse7">
+        <img src="../../img/anyuse9.png" alt="anyuse9">
+        <img src="../../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>
     
     <div class="w-full flex">
@@ -86,7 +100,7 @@
                             我渐渐的有些困，我问他这东西要搞多久
                         </div>
                         <div class="w-1/3 border-2">
-                            <img class="h-16 w-32" src="../../img/picture.jpeg" alt=""/>
+                            <img class="h-16 w-32" src="../../img/picture.png" alt=""/>
                         </div>
                     </div>
                     
@@ -95,7 +109,7 @@
                             他说要几个小时
                         </div>
                         <div class="w-1/3 border-2">
-                            <img class="h-16 w-32" src="../../img/picture.jpeg" alt=""/>
+                            <img class="h-16 w-32" src="../../img/picture.png" alt=""/>
                         </div>
                     </div>
                     
@@ -104,7 +118,7 @@
                             我给他倒了杯茶，就一个人去隔壁睡觉了
                         </div>
                         <div class="w-1/3 border-2">
-                            <img class="h-16 w-32" src="../../img/picture.jpeg" alt=""/>
+                            <img class="h-16 w-32" src="../../img/picture.png" alt=""/>
                         </div>
                     </div>
                 </div>
@@ -138,9 +152,9 @@
     
     <div class="w-fit flex flex-wrap m-4 border-2 justify-around rounded-lg shadow-lg bg-gradient-to-r from-cyan-300 to to-violet-300">
         <ul class="li-img clearfix">
-            <li><img src="../../img/anyuse2.jpg" alt=""/></li>
+            <li><img src="../../img/anyuse2.png" alt=""/></li>
-            <li><img src="../../img/anyuse3.jpg" alt=""/></li>
+            <li><img src="../../img/anyuse3.png" alt=""/></li>
-            <li><img src="../../img/anyuse4.jpg" alt=""/></li>
+            <li><img src="../../img/anyuse4.png" alt=""/></li>
             <li><img src="../../img/anyuse5.png" alt=""/></li>
             <li><img src="../../img/anyuse6.png" alt=""/></li>
             <li><img src="../../img/anyuse7.png" alt=""/></li>
@@ -156,42 +170,5 @@
         <p>Copyright@ 2002-2018 School of Software</p>
     </footer>
 </div>
-
-<script>
-    const sliderData = [
-        {url: "../../img/anuse0.png"},
-        {url: "../../img/anuse1.png"},
-        {url: "../../img/anuse2.png"},
-        {url: "../../img/anuse3.png"},
-    ];
-    const img = document.getElementById("img");
-    const dot = document.getElementById("dot");
-
-    let i = 0;
-
-    setInterval(function () {
-        i++;
-        if (i > 3) {
-            i = 0;
-        }
-        img.src = sliderData[i].url;
-        for (let j = 0; j <= 3; j++) {
-            if (i === j) {
-                dot.children[j].style.backgroundColor = "white";
-            } else {
-                dot.children[j].style.backgroundColor = "inherit";
-            }
-
-            img.src = sliderData[i].url;
-            for (let j = 0; j <= 3; j++) {
-                if (i === j) {
-                    dot.children[j].style.backgroundColor = "white";
-                } else {
-                    dot.children[j].style.backgroundColor = "inherit";
-                }
-            }
-        }
-    }, 3000);
-</script>
 </body>
 </html>

src/scss/styleYnu.scss

@@ -28,3 +28,68 @@
 	visibility: hidden;
 	clear: both;
 }
+
+#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/ts/slider.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); // 设置定时器定时切换
+})();