admin

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

@@ -233,6 +233,32 @@
             </div>
         </div>
     </div>
+    <script>
+        // 第一步：获取元素
+        var circleBtn = document.querySelectorAll(".circle-item");
+        var swiperImg = document.querySelectorAll(".img-item");
+
+        // 第二部绑定事件
+        // 绑定右下角小圆点按钮点击事件
+        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");
+
+            }
+        }
+    </script>
 </body>
 
 </html>