admin

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

@@ -24,12 +24,13 @@
             position: relative;
         }
 
-        
-        .img-list{
+
+        .img-list {
             position: absolute;
             top: 0;
             left: 0;
         }
+
         .img-list img {
             width: 100%;
         }
@@ -50,38 +51,45 @@
             height: 100%;
             /* background-color: rgba(0,0,0,0.5); */
         }
-        .control-content .left-nav{
+
+        .control-content .left-nav {
             width: 234px;
             height: 100%;
             float: left;
-            background-color: rgba(105,101,101,.6);
+            background-color: rgba(105, 101, 101, .6);
         }
-        .control-content .left-nav ul{
+
+        .control-content .left-nav ul {
             padding: 20px 0;
         }
-        .control-content .left-nav ul li{
+
+        .control-content .left-nav ul li {
             padding-left: 30px;
             color: #fff;
             height: 42px;
             line-height: 42px;
             font-size: 14px;
         }
-        .control-content .left-nav ul li:hover{
+
+        .control-content .left-nav ul li:hover {
             background-color: #ff6700;
             cursor: pointer;
         }
-        .control-content .left-nav ul li .iconfont{
+
+        .control-content .left-nav ul li .iconfont {
             float: right;
             margin-right: 30px;
         }
-        .control-content .right-btn{
+
+        .control-content .right-btn {
             width: 992px;
             float: left;
             height: 100%;
             /* background-color: red; */
             position: relative;
         }
-        .control-content .arr-btn{
+
+        .control-content .arr-btn {
             height: 69px;
             width: 100%;
             /* background-color: blue; */
@@ -89,48 +97,58 @@
             top: 50%;
             margin-top: -35px;
         }
-        .control-content .arr-btn .arr-left, .control-content .arr-btn .arr-right{
+
+        .control-content .arr-btn .arr-left,
+        .control-content .arr-btn .arr-right {
             width: 41px;
             height: 100%;
             background-image: url("./img/icon-slides.png");
 
         }
-        .control-content .arr-btn .arr-left{
+
+        .control-content .arr-btn .arr-left {
             float: left;
             background-position: -84px 0;
         }
-        .control-content .arr-btn .arr-left:hover{
+
+        .control-content .arr-btn .arr-left:hover {
             background-position: 0 0;
             cursor: pointer;
         }
-        .control-content .arr-btn .arr-right{
+
+        .control-content .arr-btn .arr-right {
             float: right;
             background-position: -125px 0;
         }
-        .control-content .arr-btn .arr-right:hover{
+
+        .control-content .arr-btn .arr-right:hover {
             background-position: -42px 0;
             cursor: pointer;
         }
-        .control-content .dot-btn .dot-btn-item{
+
+        .control-content .dot-btn .dot-btn-item {
             width: 6px;
             height: 6px;
-            border:2px solid #fff;
+            border: 2px solid #fff;
             border-radius: 50%;
-            background-color: rgba(0,0,0,.4);
-            border-color: hsla(0,0%,100%,.3);
+            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);
+
+        .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 .active {
+            background-color: hsla(0, 0%, 100%, .3);
+            border-color: rgba(0, 0, 0, .4);
         }
-        .control-content .dot-btn{
+
+        .control-content .dot-btn {
             position: absolute;
             right: 50px;
             bottom: 30px;
@@ -231,21 +249,68 @@
         var aDotBtns = document.getElementsByClassName("dot-btn-item");
         // 获取图片列表元素
         var aImgItems = document.getElementsByClassName("img-list-item");
+        // 获取向右按钮
+        var oArrRight = document.getElementsByClassName("arr-right")[0];
+        // 获取向左按钮
+        var oArrLeft = document.getElementsByClassName("arr-left")[0];
+
+        // 定义全局变量 当前是第几张图片 的索引
+        var curIndex = 0;
+
+        // 定义切换图片函数
+        function switchImg(index) {
+            // 清除所有圆点按钮的选中状态
+            for (var j = 0; j < aDotBtns.length; j++) {
+                aDotBtns[j].classList.remove("active");
+                aImgItems[j].classList.remove("active");
+            }
+            // 给当前按钮添加选中状态
+            aDotBtns[index].classList.add("active");
+            // 给相对应图片添加选中状态
+            aImgItems[index].classList.add("active");
+        }
 
         // 遍历所有圆点按钮绑定点击事件
-        for(var i =0;i<aDotBtns.length;i++){
+        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");
+            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");
+                
+                // 调用切换图片函数
+                switchImg(this.index);
+                // 更新当前索引值
+                curIndex = this.index;
+            }
+        }
+        // 向右按钮点击事件
+        oArrRight.onclick = function () {
+            // 当前索引+1
+            curIndex++;
+            // 如果当前索引大于等于图片总数 则重置为0
+            if (curIndex >= aImgItems.length) {
+                curIndex = 0;
+            }
+            // 调用切换图片函数
+            switchImg(curIndex);
+        }
+        // 向左按钮点击事件
+        oArrLeft.onclick = function () {
+            // 当前索引-1
+            curIndex--;
+            // 如果当前索引小于0 则重置为最后一张图片的索引
+            if (curIndex < 0) {
+                curIndex = aImgItems.length - 1;
             }
+            // 调用切换图片函数
+            switchImg(curIndex);
         }
     </script>
 </body>