admin

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

@@ -111,6 +111,30 @@
             background-position: -42px 0;
             cursor: pointer;
         }
+        .control-content .dot-btn .dot-btn-item{
+            width: 6px;
+            height: 6px;
+            border:2px solid #fff;
+            border-radius: 50%;
+            background-color: rgba(0,0,0,.4);
+            border-color: hsla(0,0%,100%,.3);
+            float: left;
+            margin: 0 3px;
+        }
+        .control-content .dot-btn .dot-btn-item:hover{
+            background-color: hsla(0,0%,100%,.3);
+            border-color:  rgba(0,0,0,.4);
+            cursor: pointer;
+        }
+        .control-content .dot-btn .active{
+            background-color: hsla(0,0%,100%,.3);
+            border-color:  rgba(0,0,0,.4);
+        }
+        .control-content .dot-btn{
+            position: absolute;
+            right: 50px;
+            bottom: 30px;
+        }
     </style>
 </head>
 
@@ -121,7 +145,7 @@
                 <li class="img-list-item active">
                     <img src="./img/slider1.jpg" alt="slider1">
                 </li>
-                <li class="img-list-item">
+                <li class="img-list-item ">
                     <img src="./img/slider2.jpg" alt="slider2">
                 </li>
                 <li class="img-list-item">
@@ -190,7 +214,7 @@
                 </div>
                 <div class="dot-btn">
                     <ul>
-                        <li class="dot-btn-item"></li>
+                        <li class="dot-btn-item active"></li>
                         <li class="dot-btn-item"></li>
                         <li class="dot-btn-item"></li>
                         <li class="dot-btn-item"></li>
@@ -201,6 +225,29 @@
             </div>
         </div>
     </div>
+
+    <script>
+        // 获取圆点按钮元素
+        var aDotBtns = document.getElementsByClassName("dot-btn-item");
+        // 获取图片列表元素
+        var aImgItems = document.getElementsByClassName("img-list-item");
+
+        // 遍历所有圆点按钮绑定点击事件
+        for(var i =0;i<aDotBtns.length;i++){
+            aDotBtns[i].index = i; // 自定义属性 记录当前按钮的索引值
+            aDotBtns[i].onclick = function(){
+                // 清除所有圆点按钮的选中状态
+                for(var j=0;j<aDotBtns.length;j++){
+                    aDotBtns[j].classList.remove("active");
+                    aImgItems[j].classList.remove("active");
+                }
+                // 给当前按钮添加选中状态
+                this.classList.add("active");
+                // 给相对应图片添加选中状态
+                aImgItems[this.index].classList.add("active");
+            }
+        }
+    </script>
 </body>
 
 </html>