před 1 rokem · 5e1e9ddefb
--- a/js/DOM/4.轮播.html
+++ b/js/DOM/4.轮播.html
@@ -0,0 +1,89 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+    <style>
			
 
				+        * {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+            list-style: none;
			
 
				+            text-decoration: none;
			
 
				+            box-sizing: border-box;
			
 
				+        }
			
 
				+        #list {
			
 
				+            width: 500px;
			
 
				+            height: 400px;
			
 
				+            border: 1px solid #000;
			
 
				+            position: relative;
			
 
				+            margin: 200px auto;
			
 
				+        }
			
 
				+        #imgBox  img{     
			
 
				+            width: 500px;
			
 
				+            height: 400px;
			
 
				+            position: absolute;
			
 
				+            
			
 
				+        }
			
 
				+        .selected {
			
 
				+            display: none;
			
 
				+        }
			
 
				+        .choose {
			
 
				+            display: block;
			
 
				+        }
			
 
				+        .point {
			
 
				+            position: absolute;
			
 
				+            overflow: hidden;
			
 
				+            bottom: 10px;
			
 
				+            right: 10px;
			
 
				+        }
			
 
				+        .point li{
			
 
				+            width: 15px;
			
 
				+            height: 15px;
			
 
				+            border-radius: 50%;
			
 
				+            background: #f00;
			
 
				+            float: left;
			
 
				+            margin-left: 20px;
			
 
				+        }
			
 
				+        .point .active {
			
 
				+            background: #ff0;
			
 
				+        }
			
 
				+        #prev,#next {
			
 
				+            width: 40px;
			
 
				+            height: 30px;
			
 
				+            text-align: center;
			
 
				+            background:yellowgreen;
			
 
				+            position: absolute;
			
 
				+            top: 48%;
			
 
				+            display: none;
			
 
				+        }
			
 
				+        #prev {
			
 
				+            left: 0;
			
 
				+        }
			
 
				+        #next {
			
 
				+            right: -2px;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="list">
			
 
				+        <div id="imgBox">
			
 
				+            <img class="selected choose" src="./images/1.jpg" alt="">
			
 
				+            <img class="selected" src="./images/2.jpg" alt="">
			
 
				+            <img class="selected" src="./images/3.jpg" alt="">
			
 
				+            <img class="selected" src="./images/4.jpg" alt="">
			
 
				+            <img class="selected" src="./images/5.jpg" alt="">
			
 
				+        </div>
			
 
				+        <ul class="point">
			
 
				+            <li class="active"></li>
			
 
				+            <li></li>
			
 
				+            <li></li>
			
 
				+            <li></li>
			
 
				+            <li></li>
			
 
				+        </ul>
			
 
				+        <div id="prev">&lt;</div>
			
 
				+        <div id="next">&gt;</div>
			
 
				+    </div>
			
 
				+    <script src="./4.轮播.js"></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/js/DOM/4.轮播.js
+++ b/js/DOM/4.轮播.js
@@ -0,0 +1,65 @@
 
				+var pictures = document.querySelectorAll(".selected");
			
 
				+var point = document.querySelectorAll(".point li");
			
 
				+var prev = document.getElementById("prev");
			
 
				+var next = document.getElementById("next");
			
 
				+var list = document.getElementById("list");
			
 
				+var current = 0;
			
 
				+// 封装切换方法
			
 
				+function autoPlay(ind) {
			
 
				+    console.log(ind,'下标')
			
 
				+    for(var i=0;i<point.length;i++) {
			
 
				+        pictures[i].className = "selected"
			
 
				+        point[i].className = "";
			
 
				+    }  
			
 
				+    pictures[ind].className = "selected choose";
			
 
				+    point[ind].className = "active"; 
			
 
				+}
			
 
				+
			
 
				+// 点击point 切换图片
			
 
				+for(var i=0;i<point.length;i++) {
			
 
				+    point[i].index = i;
			
 
				+    point[i].onclick = function() {
			
 
				+        current = this.index;
			
 
				+        autoPlay(current);
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+// 点击切换下一张
			
 
				+next.onclick = function() {
			
 
				+    current++;
			
 
				+    if(current == point.length) {
			
 
				+        current = 0;
			
 
				+    }
			
 
				+    autoPlay(current);
			
 
				+}
			
 
				+
			
 
				+// 点击切换上一张
			
 
				+prev.onclick = function() {
			
 
				+    // console.log(point.length)
			
 
				+    current--;
			
 
				+    if(current < 0) {
			
 
				+        current = point.length - 1;
			
 
				+    }
			
 
				+    autoPlay(current);
			
 
				+}
			
 
				+
			
 
				+// 自动播放
			
 
				+var timer =setInterval(function(){
			
 
				+    next.onclick()
			
 
				+},1000)
			
 
				+
			
 
				+// 鼠标移入停止播放
			
 
				+list.onmousemove = function() {
			
 
				+    prev.style.display = 'block';
			
 
				+    next.style.display = 'block';
			
 
				+    clearInterval(timer);
			
 
				+}
			
 
				+
			
 
				+// 鼠标移出继续播放
			
 
				+list.onmouseout = function() {
			
 
				+    prev.style.display = 'none';
			
 
				+    next.style.display = 'none';
			
 
				+    timer =setInterval(function(){
			
 
				+        next.onclick()
			
 
				+    },1000)
			
 
				+}
			
--- a/js/DOM/images/1.jpg
+++ b/js/DOM/images/1.jpg
--- a/js/DOM/images/2.jpg
+++ b/js/DOM/images/2.jpg
--- a/js/DOM/images/3.jpg
+++ b/js/DOM/images/3.jpg
--- a/js/DOM/images/4.jpg
+++ b/js/DOM/images/4.jpg
--- a/js/DOM/images/5.jpg
+++ b/js/DOM/images/5.jpg
--- a/js/DOM/images/6.jpg
+++ b/js/DOM/images/6.jpg
--- a/js/DOM/images/7.jpg
+++ b/js/DOM/images/7.jpg