new

6_Dom/4_轮播图/轮播图.html

@@ -102,6 +102,74 @@
     </div>
   </div>
   <script>
+    var btn = document.getElementsByTagName('li')
+    var imgs = document.getElementsByClassName('selected')
+    var next = document.getElementById('next')
+    var prev = document.getElementById('prev')
+    var container = document.getElementById('container')
+
+    iNow = 0;
+    for (var i = 0; i < btn.length; i++) {
+      btn[i].index = i
+      btn[i].onclick = function () {
+        for (var j = 0; j < btn.length; j++) {
+          btn[j].className = ''
+          imgs[j].className = 'selected'
+        }
+        this.className = 'select'
+        //this.index = this的索引
+        imgs[this.index].className = 'selected choice'
+        iNow = this.index
+      }
+    }
+    //下一个点击事件
+    next.onclick = function () {
+      iNow++;
+      if (iNow > 4) {
+        iNow = 0
+      }
+      console.log(iNow)
+      // for (var i = 0; i < btn.length; i++) {
+      //   btn[i].className = ''
+      //   imgs[i].className = 'selected'
+      // }
+      // imgs[iNow].className = 'selected choice'
+      // btn[iNow].className = 'select'
+      myFun(iNow)
+    }
+    //上一个点击事件
+    prev.onclick = function () {
+      iNow--;
+      if (iNow < 0) {
+        iNow = btn.length - 1
+      }
+      myFun(iNow)
+    }
+    container.onmousemove = function () {
+      next.style.display = 'block'
+      prev.style.display = 'block'
+      clearInterval(timer)
+    }
+    container.onmouseout = function () {
+      next.style.display = 'none'
+      prev.style.display = 'none'
+      timer = setInterval(function () {
+        next.onclick()
+      }, 2000)
+    }
+
+    var timer = setInterval(function () {
+      next.onclick()
+    }, 2000)
+    var myFun = function (xx) {
+      for (var i = 0; i < btn.length; i++) {
+        btn[i].className = ''
+        imgs[i].className = 'selected'
+      }
+      imgs[xx].className = 'selected choice'
+      btn[xx].className = 'select'
+    }
+
 
   </script>
 </body>