首頁 探索 說明
登入
lovecoding
/
Web1020
10
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

admin

fengchuanyu 3 月之前
父節點
3be3c34999
當前提交
b0cd9992c9
共有 3 個文件被更改，包括 196 次插入 和 54 次删除
統一視圖 顯示文件統計
  1. 67 0
      5_DOM/15_鼠标移入移出.html
  2. 19 13
      5_DOM/3_绑定事件.html
  3. 110 41
      5_DOM/练习6_轮播图.html

+ 67 - 0
5_DOM/15_鼠标移入移出.html
查看文件 

@@ -0,0 +1,67 @@
 
+<!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: 400px;
 
+            height: 400px;
 
+            background-color: red;
 
+        }
 
+        .box2{
 
+            width: 300px;
 
+            height: 300px;
 
+            background-color: blue;
 
+        }
 
+        .box3{
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: green;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="box2">
 
+            <div class="box3"></div>
 
+        </div>
 
+    </div>
 
+    <script>
 
+        var oBox = document.getElementsByClassName("box")[0];
 
+        var oBox2 = document.getElementsByClassName("box2")[0];
 
+        var oBox3 = document.getElementsByClassName("box3")[0];
 
+        // oBox.onmouseover = function(){
 
+        //     console.log("鼠标移入box1:onmouseover");
 
+        // }
 
+        // oBox2.onmouseover = function(){
 
+        //     console.log("鼠标移入box2:onmouseover");
 
+        // }
 
+        // oBox3.onmouseover = function(){
 
+        //     console.log("鼠标移入box3:onmouseover");
 
+        // }
 
+
 
+        oBox.onmouseenter = function(){
 
+            console.log("鼠标移入box1:onmouseenter");
 
+        }
 
+        oBox2.onmouseenter = function(){
 
+            console.log("鼠标移入box2:onmouseenter");
 
+        }
 
+        oBox3.onmouseenter = function(){
 
+            console.log("鼠标移入box3:onmouseenter");
 
+        }
 
+
 
+        // oBox.onmouseout = function(){
 
+        //     console.log("鼠标移出:onmouseout");
 
+        // }
 
+
 
+        // oBox.onmouseenter = function(){
 
+        //     console.log("鼠标移入:onmouseenter");
 
+        // }
 
+        // oBox.onmouseleave = function(){
 
+        //     console.log("鼠标移出:onmouseleave");
 
+        // }
 
+    </script>
 
+</body>
 
+</html>

+ 19 - 13
5_DOM/3_绑定事件.html
查看文件 

@@ -35,21 +35,27 @@
 
         // }
 
         // }
 
 
 
         // 鼠标移入
 
         // 鼠标移入
 
-        oBtn.onmouseover = function(e){
 
-            console.log("onmouseover");
 
-            console.log(e);
 
-            console.log(this);
 
-        }
 
+        // 事件处理函数中是可以使用this this指向的是触发事件的对象
 
+        // oBtn.onmouseover = function(e){
 
+        //     console.log("onmouseover");
 
+        //     console.log(e);
 
+        //     console.log(this);
 
+        // }
 
+
 
+        // var obj = {
 
+        //     name: "张三",
 
+        //     age: 18,
 
+        //     talk:function(){
 
+        //         console.log(obj.name);
 
+        //         console.log(this.name);
 
+        //     }
 
+        // }
 
+        // obj.talk();
 
 
 
-        var obj = {
 
-            name: "张三",
 
-            age: 18,
 
-            talk:function(){
 
-                console.log(obj.name);
 
-                console.log(this.name);
 
-            }
 
+        // 鼠标移出
 
+        oBtn.onmouseout = function(){
 
+            console.log("onmouseout");
 
         }
 
         }
 
-        obj.talk();
 
 
 
     </script>
 
     </script>
 
 </body>
 
 </body>

+ 110 - 41
5_DOM/练习6_轮播图.html
查看文件 

@@ -1,90 +1,103 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
+
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Document</title>
 
     <title>Document</title>
 
     <style>
 
     <style>
 
         /* css reset */
 
         /* css reset */
 
-        body{
 
+        body {
 
             margin: 0;
 
             margin: 0;
 
         }
 
         }
 
-        li{
 
+
 
+        li {
 
             list-style: none;
 
             list-style: none;
 
         }
 
         }
 
-        ul{
 
+
 
+        ul {
 
             margin: 0;
 
             margin: 0;
 
             padding: 0;
 
             padding: 0;
 
         }
 
         }
 
-        html{
 
+
 
+        html {
 
             background-color: black;
 
             background-color: black;
 
         }
 
         }
 
+
 
         /* 工具类 */
 
         /* 工具类 */
 
-        .clearfix::after{
 
+        .clearfix::after {
 
             content: "";
 
             content: "";
 
             display: block;
 
             display: block;
 
             clear: both;
 
             clear: both;
 
         }
 
         }
 
 
 
-        .container{
 
-            width:600px;
 
-            height:200px;
 
-            border:4px solid #fff;
 
+        .container {
 
+            width: 600px;
 
+            height: 200px;
 
+            border: 4px solid #fff;
 
             margin: 100px auto;
 
             margin: 100px auto;
 
             position: relative;
 
             position: relative;
 
         }
 
         }
 
-        .container .swiper-img img{
 
+
 
+        .container .swiper-img img {
 
             width: 600px;
 
             width: 600px;
 
             height: 200px;
 
             height: 200px;
 
             display: none;
 
             display: none;
 
         }
 
         }
 
-        .container .swiper-img .active{
 
+
 
+        .container .swiper-img .active {
 
             display: block;
 
             display: block;
 
         }
 
         }
 
+
 
         /* 按钮区域 */
 
         /* 按钮区域 */
 
-        .container .swiper-btn{
 
+        .container .swiper-btn {
 
             position: absolute;
 
             position: absolute;
 
             bottom: 10px;
 
             bottom: 10px;
 
             left: 0;
 
             left: 0;
 
             width: calc(100% - 40px);
 
             width: calc(100% - 40px);
 
             padding: 0 20px;
 
             padding: 0 20px;
 
         }
 
         }
 
-        .container .swiper-btn li{
 
+
 
+        .container .swiper-btn li {
 
             color: #fff;
 
             color: #fff;
 
             display: inline-block;
 
             display: inline-block;
 
             width: 20px;
 
             width: 20px;
 
             height: 20px;
 
             height: 20px;
 
             border-radius: 10px;
 
             border-radius: 10px;
 
             background-color: #f90;
 
             background-color: #f90;
 
-            text-align:center;
 
+            text-align: center;
 
             line-height: 20px;
 
             line-height: 20px;
 
-            margin:0 3px;
 
+            margin: 0 3px;
 
         }
 
         }
 
-        .container .swiper-btn .left-btn{
 
+
 
+        .container .swiper-btn .left-btn {
 
             float: left;
 
             float: left;
 
         }
 
         }
 
-        .container .swiper-btn .right-btn{
 
+
 
+        .container .swiper-btn .right-btn {
 
             float: right;
 
             float: right;
 
         }
 
         }
 
-        .container .right-btn .active{
 
+
 
+        .container .right-btn .active {
 
             background-color: red;
 
             background-color: red;
 
         }
 
         }
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
+
 
 <body>
 
 <body>
 
     <div class="container">
 
     <div class="container">
 
         <div class="swiper-img">
 
         <div class="swiper-img">
 
-           <img class="s-img active" src="./image/image.png" alt="图片">
 
-           <img class="s-img" src="./image/image1.png" alt="图片">
 
-           <img class="s-img" src="./image/image2.png" alt="图片">
 
-           <img class="s-img" src="./image/image3.png" alt="图片">
 
-           <img class="s-img" src="./image/image4.png" alt="图片">
 
+            <img class="s-img active" src="./image/image.png" alt="图片">
 
+            <img class="s-img" src="./image/image1.png" alt="图片">
 
+            <img class="s-img" src="./image/image2.png" alt="图片">
 
+            <img class="s-img" src="./image/image3.png" alt="图片">
 
+            <img class="s-img" src="./image/image4.png" alt="图片">
 
         </div>
 
         </div>
 
         <div class="swiper-btn clearfix">
 
         <div class="swiper-btn clearfix">
 
             <div class="left-btn">
 
             <div class="left-btn">
 
                 <ul>
 
                 <ul>
 
-                    <li>&lt;</li>
 
-                    <li>&gt;</li>
 
+                    <li class="arr-btn">&lt;</li>
 
+                    <li class="arr-btn">&gt;</li>
 
                 </ul>
 
                 </ul>
 
             </div>
 
             </div>
 
             <div class="right-btn">
 
             <div class="right-btn">
 
@@ -98,30 +111,86 @@
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
-    <script> 
+    <script>
 
         // 获取所有轮播的图片
 
         // 获取所有轮播的图片
 
-        aImg = document.getElementsByClassName("s-img");
 
+        var aImg = document.getElementsByClassName("s-img");
 
         // 获取所有数字按钮
 
         // 获取所有数字按钮
 
-        aNumBtn = document.getElementsByClassName("num-btn");
 
+        var aNumBtn = document.getElementsByClassName("num-btn");
 
+        // 获取左右按钮
 
+        var leftBtn = document.getElementsByClassName("arr-btn")[0];
 
+        var rightBtn = document.getElementsByClassName("arr-btn")[1];
 
+        // 定义全局变量放置当前索引值
 
+        var nowIndex = 0;
 
+
 
+
 
+        // 定义切换轮播图函数
 
+        function changeSwiper(index) {
 
+            // 清除状态
 
+            for (var i = 0; i < aNumBtn.length; i++) {
 
+                // 清除所有数字按钮的选中状态
 
+                aNumBtn[i].classList.remove("active");
 
+                // 清除所有轮播图片的选中状态
 
+                aImg[i].classList.remove("active");
 
+            }
 
+            // 给当前选中的数字按钮加上选中状态
 
+            aNumBtn[index].classList.add("active");
 
+            // 给当前选中的轮播图片加上选中状态
 
+            aImg[index].classList.add("active");
 
+            // 更新当前索引值
 
+            nowIndex = index;
 
+        }
 
 
 
         // 给数字按钮绑定事件
 
         // 给数字按钮绑定事件
 
-        for(var i=0;i<aNumBtn.length;i++){
 
+        for (var i = 0; i < aNumBtn.length; i++) {
 
             // 给每个数字按钮绑定一个索引值
 
             // 给每个数字按钮绑定一个索引值
 
             aNumBtn[i].index = i;
 
             aNumBtn[i].index = i;
 
-            aNumBtn[i].onmouseover = function(){
 
-                // 清除状态
 
-                for(var j =0;j<aNumBtn.length;j++){
 
-                    // 清除所有数字按钮的选中状态
 
-                    aNumBtn[j].classList.remove("active");
 
-                    // 清除所有轮播图片的选中状态
 
-                    aImg[j].classList.remove("active");
 
-                }
 
-                // 给当前选中的数字按钮加上选中状态
 
-                this.classList.add("active");
 
-                // 给当前选中的轮播图片加上选中状态
 
-                aImg[this.index].classList.add("active");
 
+            aNumBtn[i].onmouseover = function () {
 
+                changeSwiper(this.index);
 
+            }
 
+        }
 
+
 
+        // 绑定向右按钮事件
 
+        rightBtn.onclick = function () {
 
+            // 判断数字是否是最后一个 如果是的从第一个开始
 
+            if(nowIndex == 4){
 
+                changeSwiper(0);
 
+            }else{
 
+                changeSwiper(nowIndex + 1);
 
             }
 
             }
 
         }
 
         }
 
+        // 绑定向左按钮事件
 
+        leftBtn.onclick = function () {
 
+            // 判断数字是否是第一个 如果是的从最后一个开始
 
+            if(nowIndex == 0){
 
+                changeSwiper(4);
 
+            }else{
 
+                changeSwiper(nowIndex - 1);
 
+            }
 
+        }
 
+
 
+        // 给数字按钮绑定事件
 
+        // for(var i=0;i<aNumBtn.length;i++){
 
+        //     // 给每个数字按钮绑定一个索引值
 
+        //     aNumBtn[i].index = i;
 
+        //     aNumBtn[i].onmouseover = function(){
 
+        //         // 清除状态
 
+        //         for(var j =0;j<aNumBtn.length;j++){
 
+        //             // 清除所有数字按钮的选中状态
 
+        //             aNumBtn[j].classList.remove("active");
 
+        //             // 清除所有轮播图片的选中状态
 
+        //             aImg[j].classList.remove("active");
 
+        //         }
 
+        //         // 给当前选中的数字按钮加上选中状态
 
+        //         this.classList.add("active");
 
+        //         // 给当前选中的轮播图片加上选中状态
 
+        //         aImg[this.index].classList.add("active");
 
+        //         // 更新当前索引值
 
+        //         nowIndex = this.index;
 
+        //     }
 
+        // }
 
+
 
+
 
     </script>
 
     </script>
 
 </body>
 
 </body>
 
+
 
 </html>
 
 </html>