admin

4-BOM&DOM/练习6_DOM轮播图.html

@@ -181,6 +181,32 @@
         var dotItem = document.getElementsByClassName("dot-item");
         // 获取轮播图图片
         var swiperItem = document.getElementsByClassName("swiper-item");   
+        // 获取向左按钮
+        var leftBtn = document.getElementsByClassName("left-btn");
+        leftBtn = leftBtn[0];
+        // 获取向右按钮
+        var rightBtn = document.getElementsByClassName("right-btn");
+        rightBtn = rightBtn[0];
+
+        // 定义变量保存当前是第几个轮播图
+        var nowIndex = 0;
+
+        // 把切换图片封装成一个函数
+        // 你告诉这个显示第几张图片即可
+        // k 带标要显示的轮播图
+        function changeImg(k){
+            // 移除所有被选中的的轮播图和小圆点
+            for(var i=0;i<swiperItem.length;i++){
+                // 移除轮播图选中效果
+                swiperItem[i].classList.remove("active");
+                // 移除小圆点选中效果
+                dotItem[i].classList.remove("active");
+            }
+            // 给选中的轮播图添加选中效果
+            swiperItem[k].classList.add("active");
+            // 给选中的小圆点添加选中效果
+            dotItem[k].classList.add("active");
+        }
 
         // 第二步为小圆点绑定事件
         for(var i=0;i<dotItem.length;i++){
@@ -188,19 +214,58 @@
             dotItem[i].index = i;
             // 为每一个按钮绑定事件
             dotItem[i].onclick = function(){
-                console.log(this.index);
-                // 第四步 移除没有被选中的轮播图及效果
-                for(var j=0;j<dotItem.length;j++){
-                    swiperItem[j].classList.remove("active");
-                    dotItem[j].classList.remove("active");
-                }
-
-                // 第三步切换轮播图图片 及选中效果
-                swiperItem[this.index].classList.add("active");
-                // 给当前点击的小点加上选中效果
-                this.classList.add("active");
+                // 同步当前索引
+                nowIndex = this.index;
+                // 调用切换图片函数
+                changeImg(nowIndex);
+                
+                // console.log(this.index);
+                // // 第四步 移除没有被选中的轮播图及效果
+                // for(var j=0;j<dotItem.length;j++){
+                //     swiperItem[j].classList.remove("active");
+                //     dotItem[j].classList.remove("active");
+                // }
+
+                // // 第三步切换轮播图图片 及选中效果
+                // swiperItem[this.index].classList.add("active");
+                // // 给当前点击的小点加上选中效果
+                // this.classList.add("active");
             }
         }
+
+
+        // 为向右按钮绑定事件
+        rightBtn.onclick = function(){
+            // 每次点击向右按钮进行 让当前索引nowIndex +1操作
+            nowIndex++;
+            // 如果超出了轮播图数量的范围 返回第一张图片
+            if(nowIndex>=swiperItem.length){
+                nowIndex = 0
+            }
+
+            // 调用切换图片的函数
+            changeImg(nowIndex);
+
+
+            // nowIndex++;
+            // nowIndex%=6;
+            
+            // for(var i=0;i<swiperItem.length;i++){
+            //     swiperItem[i].classList.remove("active");
+            //     dotItem[i].classList.remove("active");
+            // }
+            // swiperItem[nowIndex].classList.add("active");
+            // dotItem[nowIndex].classList.add("active");
+        }
+        // 为向左按钮绑定事件
+        leftBtn.onclick = function(){
+            nowIndex--;
+            if(nowIndex<0){
+                nowIndex = swiperItem.length-1;
+            }
+            changeImg(nowIndex);
+        }
+
    </script>
 </body>