admin

4_BOM&DOM/练习题6_轮播图.html

@@ -69,7 +69,8 @@
             width: 1226px;
             height: 460px;
         }
-        .swipper-img .img-item.active{
+
+        .swipper-img .img-item.active {
             z-index: 90;
         }
 
@@ -237,27 +238,121 @@
         // 第一步：获取元素
         var circleBtn = document.querySelectorAll(".circle-item");
         var swiperImg = document.querySelectorAll(".img-item");
-
+        var nextBtn = document.querySelector(".arr-right");
+        var prevBtn = document.querySelector(".arr-left");
+        var swiperContent = document.querySelector(".swipper-content");
+        // 定义一个变量，用于记录当前显示的图片的序号
+        var nowIndex = 0;
+        // 定义一个全局的事件变量
+        var timer = 0;
         // 第二部绑定事件
-        // 绑定右下角小圆点按钮点击事件
-        for(var i = 0;i<circleBtn.length;i++){
-            // 循环过程中为每一个小圆点添加序号
+        // // 绑定右下角小圆点按钮点击事件
+        // for(var i = 0;i<circleBtn.length;i++){
+        //     // 循环过程中为每一个小圆点添加序号
+        //     circleBtn[i].index = i;
+        //     circleBtn[i].onclick = function(){
+        //         for(var j =0 ;j<circleBtn.length;j++){
+        //         // 去除所有小圆点按钮的选中状态
+        //             circleBtn[j].classList.remove("active");
+        //             // 去除所有图片的显示状态
+        //             swiperImg[j].classList.remove("active");
+        //         }
+
+        //         // 点击小圆点按钮时，切换按钮的选中状态
+        //         this.classList.add("active");
+        //         // 点击小圆点按钮时，切换对应图片的显示状态
+        //         swiperImg[this.index].classList.add("active");
+        //         // 更新当前显示的图片的序号
+        //         nowIndex = this.index;
+        //     }
+        // }
+
+        // 为向下按钮绑定事件
+        // nextBtn.onclick = function(){
+        //     // 点击向下按钮时，切换到下一张图片
+        //     nowIndex++;
+        //     // 清除其他图片选中状态
+        //      for(var j =0 ;j<circleBtn.length;j++){
+        //             // 去除所有图片的显示状态
+        //             swiperImg[j].classList.remove("active");
+        //             // 清除所有圆点按钮状态
+        //             circleBtn[j].classList.remove("active");
+        //         }
+        //     // 点击向下按钮时，切换到下一张图片的显示状态
+        //     swiperImg[nowIndex].classList.add("active");
+        //     // 为圆点按钮增加选中状态
+        //     circleBtn[nowIndex].classList.add("active");
+        // }
+
+
+        // 封装切换图片函数
+        function changeImg(current) {
+            // 清除所有其他图片选中状态
+            for (var j = 0; j < circleBtn.length; j++) {
+                // 清除所有圆点按钮状态
+                circleBtn[j].classList.remove("active");
+                // 清除所有图片的显示状态
+                swiperImg[j].classList.remove("active");
+            }
+            // 为选中的的图片添加选中状态
+            swiperImg[current].classList.add("active");
+            // 为选中的按钮添加选中状态
+            circleBtn[current].classList.add("active");
+            // 更新当前显示的图片的序号
+            nowIndex = current;
+        }
+
+        // 通过函数实现按钮切换图片
+        for (var i = 0; i < circleBtn.length; i++) {
+            // 为每一个按钮添加顺序编号
             circleBtn[i].index = i;
-            circleBtn[i].onclick = function(){
-                for(var j =0 ;j<circleBtn.length;j++){
-                // 去除所有小圆点按钮的选中状态
-                    circleBtn[j].classList.remove("active");
-                    // 去除所有图片的显示状态
-                    swiperImg[j].classList.remove("active");
-                }
-
-                // 点击小圆点按钮时，切换按钮的选中状态
-                this.classList.add("active");
-                // 点击小圆点按钮时，切换对应图片的显示状态
-                swiperImg[this.index].classList.add("active");
+            // 为每一个按钮绑定点击事件
+            circleBtn[i].onclick = function () {
+                // 调用切换图片函数并传入切换的图片序号
+                changeImg(this.index);
+            }
+        }
 
+        // 通过调用函数实现下一张图片
+        nextBtn.onclick = function () {
+            if (nowIndex + 1 >= 6) {
+                changeImg(0);
+            } else {
+                changeImg(nowIndex + 1);
+            }
+        }
+        // 向上按钮事件
+        prevBtn.onclick = function () {
+            if (nowIndex - 1 < 0) {
+                changeImg(5);
+            } else {
+                changeImg(nowIndex - 1);
             }
         }
+
+        // 自动切换图片
+        function changeInterval() {
+            timer = setInterval(function () {
+                // if(nowIndex+1>=6){
+                //     changeImg(0);
+                // }else{
+                //     changeImg(nowIndex + 1);
+                // }
+                nextBtn.onclick();
+            }, 1000);
+        }
+
+
+        // 移入容器停止定时器
+        swiperContent.onmouseover = function () {
+            clearInterval(timer);
+        }
+        // 鼠标移出容器继续切换图片
+        swiperContent.onmouseout = function () {
+            changeInterval();
+        }
+        // 调用自动切换图片函数
+        changeInterval();
     </script>
 </body>