Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
lovecoding
/
web0715
10
0
Салаа 0
Файлууд Асуудлууд 0 Мэдлэгийн сан
Эх сурвалжийг харах

add

fengchuanyu 10 сар өмнө
parent
036e99b40a
commit
8db5730b1e
2 өөрчлөгдсөн 190 нэмэгдсэн , 0 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 51 0
      4_DOM&BOM/复习1_DOM.html
  2. 139 0
      4_DOM&BOM/练习6_轮播图.html

+ 51 - 0
4_DOM&BOM/复习1_DOM.html
Файл харах 

@@ -0,0 +1,51 @@
 
+<!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{
 
+            color: red;
 
+        }
 
+        div{
 
+
 
+        }
 
+        #box2{
 
+
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">a</div>
 
+    <div class="box">b</div>
 
+    <div id="box2">c
 
+        <div class="box3">d</div>
 
+    </div>
 
+    <span class="str">hello world</span>
 
+    <script>
 
+
 
+        var oStr = document.getElementsByClassName("str");
 
+        oStr[0].innerText = "你好世界";
 
+        oStr[0].style.color = "yellow";
 
+        // var aBox = document.getElementsByTagName("div");
 
+        // console.log(aBox);
 
+        // aBox[]
 
+
 
+    //    var oBox = document.getElementById("box2");
 
+    //    oBox.innerText = "你好";
 
+       
+       // var aBox = document.getElementsByClassName("box");
 
+        // console.log(aBox);
 
+        // aBox[0].innerText = "hello";
 
+        // var obj = {
 
+        //     a:1,
 
+        //     b:2,
 
+        //     foo:function(){
 
+        //         console.log("hello");
 
+        //     }
 
+        // }
 
+        // obj.foo()
 
+    </script>
 
+</body>
 
+</html>

+ 139 - 0
4_DOM&BOM/练习6_轮播图.html
Файл харах 

@@ -0,0 +1,139 @@
 
+<!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>
 
+        /* css reset */
 
+        body,ul{
 
+            margin:0;
 
+            padding: 0;
 
+        }
 
+        li{
 
+            list-style: none;
 
+        }
 
+        body{
 
+          height: 100vh;
 
+          background-color: black; 
+          overflow: hidden; 
+        }
 
+        .container{
 
+            width: 490px;
 
+            height: 170px;
 
+            border:5px solid #fff;
 
+            margin: 100px auto;
 
+            position: relative;
 
+        }
 
+        .container .slider-img{
 
+            position: relative;
 
+        }
 
+        .container .slider-img img{
 
+            width: 490px;
 
+            height: 170px;
 
+        }
 
+        .container .slider-img li{
 
+            position: absolute;
 
+            top:0;
 
+            left: 0;
 
+            display: none;
 
+        }
 
+        .container .slider-img .active{
 
+            display: block;
 
+        }
 
+        .slider-btn{
 
+            position: absolute;
 
+            bottom: 10px;
 
+            left: 0;
 
+            width: 100%;
 
+        }
 
+        .slider-btn ul li{
 
+            color: #fff;
 
+            display: inline-block;
 
+            width: 20px;
 
+            height: 20px;
 
+            background-color: #f90;
 
+            border-radius: 50%;
 
+            text-align: center;
 
+            line-height: 20px;
 
+            cursor: pointer;
 
+        }
 
+        .slider-btn .active{
 
+            background-color: red;
 
+        }
 
+        .slider-btn .slider-btn-left{
 
+            float: left;
 
+            padding-left: 20px;
 
+        }
 
+        .slider-btn .slider-btn-right{
 
+            float: right;
 
+            padding-right: 20px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="container"> 
+        <div class="slider-img">
 
+            <ul>
 
+                <li class="img-item active">
 
+                    <img src="./image/image.png" alt="img">
 
+                </li>
 
+                <li class="img-item">
 
+                    <img src="./image/image1.png" alt="img">
 
+                </li>
 
+                <li class="img-item">
 
+                    <img src="./image/image2.png" alt="img">
 
+                </li>
 
+                <li class="img-item">
 
+                    <img src="./image/image3.png" alt="img">
 
+                </li>
 
+                <li class="img-item">
 
+                    <img src="./image/image4.png" alt="img">
 
+                </li>
 
+            </ul>
 
+        </div>
 
+        <div class="slider-btn">
 
+            <div class="slider-btn-left">
 
+                <ul>
 
+                    <li>&lt;</li>
 
+                    <li>&gt;</li>
 
+                </ul>
 
+            </div>
 
+            <div class="slider-btn-right">
 
+                <ul>
 
+                    <li class="num-btn active">1</li>
 
+                    <li class="num-btn">2</li>
 
+                    <li class="num-btn">3</li>
 
+                    <li class="num-btn">4</li>
 
+                    <li class="num-btn">5</li>
 
+                </ul>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    <script>
 
+        // 获取5个数字按钮
 
+        var numBtn = document.getElementsByClassName("num-btn");
 
+        // 获取5张图片
 
+        var imgItem = document.getElementsByClassName("img-item");
 
+
 
+        // 给5个数字按钮绑定事件
 
+        for(var i=0;i<numBtn.length;i++){
 
+            // 循环过程当中给每一个按钮添加一个新属性index 用来保存索引i
 
+            numBtn[i].index = i;
 
+            numBtn[i].onmouseenter = function(){
 
+                // 循环所有按钮 将选中状态的active类逐个移除
 
+                for(var j=0;j<numBtn.length;j++){
 
+                    // 移除按钮的active类
 
+                    numBtn[j].classList.remove("active");
 
+                    // 移除图片的选中状态 active类
 
+                    imgItem[j].classList.remove("active");
 
+                }
 
+                // 向当前移入的数字按钮中添加一个新类 activ 变为选中状态
 
+                this.classList.add("active");
 
+                // 向制定索引的图片添加选中状态acitve类
 
+                imgItem[this.index].classList.add("active");
 
+            }
 
+        }
 
+    </script>
 
+</body>
 
+</html>