1 жил өмнө · 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