2 tuần trước cách đây · 9927cccf53
--- a/3.js初级/DOM/6.轮播.html
+++ b/3.js初级/DOM/6.轮播.html
@@ -0,0 +1,96 @@
 
				+<!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;
			
 
				+        }
			
 
				+        #container {
			
 
				+            width: 590px;
			
 
				+            height: 470px;
			
 
				+            margin: 150px auto;
			
 
				+            border: 2px solid #000;
			
 
				+            position: relative;
			
 
				+        }
			
 
				+        .selected {
			
 
				+            display: none;
			
 
				+        }
			
 
				+        .choose {
			
 
				+            display: block;
			
 
				+        }
			
 
				+        #list {
			
 
				+            overflow: hidden;
			
 
				+            position: absolute;
			
 
				+            right: 10px;
			
 
				+            bottom: 10px;
			
 
				+        }
			
 
				+        #list li {
			
 
				+            float: left;
			
 
				+            width: 30px;
			
 
				+            height: 30px;
			
 
				+            text-align: center;
			
 
				+            line-height: 30px;
			
 
				+            font-size: 14px;
			
 
				+            border-radius: 50%;
			
 
				+            color: #fff;
			
 
				+            background-color: blue;
			
 
				+            margin-left: 7px;
			
 
				+        }
			
 
				+        #list .active {
			
 
				+            color: yellow;
			
 
				+            background: red;
			
 
				+        }
			
 
				+        #prev,#next {
			
 
				+            width: 60px;
			
 
				+            height: 40px;
			
 
				+            text-align: center;
			
 
				+            line-height: 40px;
			
 
				+            color: #fff;
			
 
				+            background: purple;
			
 
				+            display: none;
			
 
				+        }
			
 
				+        #prev{
			
 
				+            position: absolute;
			
 
				+            left: 0;
			
 
				+            top:50%;
			
 
				+        }
			
 
				+        #next{
			
 
				+            position: absolute;
			
 
				+            right: 0;
			
 
				+            top:50%;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="container">
			
 
				+        <div id="imgBox">
			
 
				+            <img src="./images/1.jpg" class="selected choose" alt="">
			
 
				+            <img src="./images/2.jpg" class="selected" alt="">
			
 
				+            <img src="./images/3.jpg" class="selected" alt="">
			
 
				+            <img src="./images/4.jpg" class="selected" alt="">
			
 
				+            <img src="./images/5.jpg" class="selected" alt="">
			
 
				+        </div>
			
 
				+        <ul id="list">
			
 
				+            <li class="active">1</li>
			
 
				+            <li>2</li>
			
 
				+            <li>3</li>
			
 
				+            <li>4</li>
			
 
				+            <li>5</li>
			
 
				+        </ul>
			
 
				+        <div id="prev">
			
 
				+            <span>&lt;</span>
			
 
				+        </div>
			
 
				+        <div id="next">
			
 
				+            <span>&gt;</span>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    <script src="./6.轮播.js"></script>    
			
 
				+</body>
			
 
				+</html>
			
--- a/3.js初级/DOM/6.轮播.js
+++ b/3.js初级/DOM/6.轮播.js
@@ -0,0 +1,66 @@
 
				+var points = document.querySelectorAll("#list li");
			
 
				+var prev = document.getElementById("prev");
			
 
				+var next = document.getElementById("next");
			
 
				+var picture = document.querySelectorAll(".selected");
			
 
				+var container = document.getElementById("container")
			
 
				+var currentIndex = 0;
			
 
				+//点击指示点 切换图片
			
 
				+for(var i=0;i<points.length;i++) {
			
 
				+    points[i].index = i;
			
 
				+    points[i].onclick = function() {
			
 
				+        //  切换
			
 
				+        currentIndex = this.index;
			
 
				+        autoPlay(currentIndex)
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+// 切换事件
			
 
				+function autoPlay (ind) {
			
 
				+    console.log(ind);
			
 
				+    for(var i=0;i<points.length;i++) {
			
 
				+        points[i].className = '';
			
 
				+        picture[i].className = 'selected'
			
 
				+    }
			
 
				+    points[ind].className = 'active';
			
 
				+    picture[ind].className = 'selected choose'
			
 
				+}
			
 
				+
			
 
				+// 点击上一页
			
 
				+prev.onclick = function() {
			
 
				+    // console.log(currentIndex,'currentIndex')
			
 
				+    currentIndex--;
			
 
				+    if(currentIndex < 0) {
			
 
				+        currentIndex = picture.length - 1;
			
 
				+    }
			
 
				+    autoPlay(currentIndex)
			
 
				+}
			
 
				+
			
 
				+// 点击下一页
			
 
				+next.onclick = function() {
			
 
				+    currentIndex++;
			
 
				+    if(currentIndex > picture.length - 1) {
			
 
				+        currentIndex = 0;
			
 
				+    }
			
 
				+    autoPlay(currentIndex)
			
 
				+}
			
 
				+
			
 
				+// 自动播放
			
 
				+var timer = setInterval(function(){
			
 
				+    next.onclick();
			
 
				+},1000)
			
 
				+
			
 
				+// 鼠标划过
			
 
				+container.onmousemove = function() {
			
 
				+    clearInterval(timer);
			
 
				+    prev.style.display = 'block';
			
 
				+    next.style.display = 'block';
			
 
				+}
			
 
				+
			
 
				+// 鼠标划出
			
 
				+container.onmouseout = function() {
			
 
				+    prev.style.display = 'none';
			
 
				+    next.style.display = 'none';
			
 
				+    timer = setInterval(function(){
			
 
				+        next.onclick();
			
 
				+    },1000)
			
 
				+}
			
--- a/3.js初级/DOM/7.获取元素的节点.html
+++ b/3.js初级/DOM/7.获取元素的节点.html
@@ -0,0 +1,40 @@
 
				+<!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;
			
 
				+      }
			
 
				+      #box {
			
 
				+        width: 300px;
			
 
				+        height: 400px;
			
 
				+        background: pink;
			
 
				+        margin-top: 100px;
			
 
				+        margin-left: 200px;
			
 
				+      }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="box"></div>
			
 
				+    <script>
			
 
				+        var box = document.getElementById("box");
			
 
				+        console.log(box);
			
 
				+        // 获取元素宽度
			
 
				+        console.log(box.offsetWidth)
			
 
				+        // 获取元素高度
			
 
				+        console.log(box.offsetHeight)
			
 
				+        // 获取元素距离顶部的高度
			
 
				+        console.log(box.offsetTop)
			
 
				+        // 获取元素距离左侧的距离
			
 
				+        console.log(box.offsetLeft)
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/3.js初级/DOM/8.transition.html
+++ b/3.js初级/DOM/8.transition.html
@@ -0,0 +1,38 @@
 
				+<!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>
			
 
				+        #box {
			
 
				+            width: 200px;
			
 
				+            height: 200px;
			
 
				+            background: red;
			
 
				+            transition: all 2s ease-in 5s;
			
 
				+        }
			
 
				+        #box:hover {
			
 
				+            width: 500px;
			
 
				+            height: 500px;
			
 
				+            background: yellow;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- 
			
 
				+        动画
			
 
				+        过渡效果：在一定时间内平滑的过渡
			
 
				+        transition:
			
 
				+            transition-property: 执行名称（all/width/height）
			
 
				+            transition-duration: 执行过渡效果时间
			
 
				+            transition-timing-function:运动曲线
			
 
				+                linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
			
 
				+                ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
			
 
				+                ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
			
 
				+                ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
			
 
				+                ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
			
 
				+            transition-delay 过渡效果何时开始。
			
 
				+    -->
			
 
				+    <div id="box"></div>
			
 
				+</body>
			
 
				+</html>
			
--- a/3.js初级/DOM/images/1.jpg
+++ b/3.js初级/DOM/images/1.jpg
--- a/3.js初级/DOM/images/2.jpg
+++ b/3.js初级/DOM/images/2.jpg
--- a/3.js初级/DOM/images/3.jpg
+++ b/3.js初级/DOM/images/3.jpg
--- a/3.js初级/DOM/images/4.jpg
+++ b/3.js初级/DOM/images/4.jpg
--- a/3.js初级/DOM/images/5.jpg
+++ b/3.js初级/DOM/images/5.jpg
--- a/3.js初级/DOM/images/6.jpg
+++ b/3.js初级/DOM/images/6.jpg
--- a/3.js初级/DOM/images/7.jpg
+++ b/3.js初级/DOM/images/7.jpg