Domovská stránka Prehľadávať Pomoc
Prihlásiť sa
lovecoding
/
W250913
10
0
Fork 0
Súbory Issues 0 Pull requesty 0 Wiki
Prechádzať zdrojové kódy

admin

fengchuanyu 4 dní pred
rodič
08e4dccca0
commit
deba356aa0
2 zmenil súbory, kde vykonal 63 pridanie a 2 odobranie
Jednotné zobrazenie Ukázať štatistiku rozdielnych dát
  1. 42 0
      4_BOM&DOM/16_DOM_动画.html
  2. 21 2
      4_BOM&DOM/练习6_轮播图.html

+ 42 - 0
4_BOM&DOM/16_DOM_动画.html
Zobraziť súbor 

@@ -0,0 +1,42 @@
 
+<!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-color: red;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+    <script>
 
+        var oBox = document.getElementsByClassName("box")[0];
 
+
 
+        oBox.onmouseover = function(){
 
+            // oBox.style.width = "400px";
 
+            // oBox.style.height = "400px";
 
+            // var width = 200;
 
+
 
+
 
+            // setInterval(function(){
 
+            //     width += 10;
 
+            //     oBox.style.width = width + "px";
 
+            // },16);
 
+
 
+            // 获取当前的宽度
 
+            // offsetWidth 属性 获取元素的宽度 包括 border padding 内容
 
+            // offsetHeight 属性 获取元素的高度 包括 border padding 内容
 
+            var width = oBox.offsetWidth;
 
+            setInterval(function(){
 
+                width += 10;
 
+                oBox.style.width = width + "px";
 
+            },16);
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 21 - 2
4_BOM&DOM/练习6_轮播图.html
Zobraziť súbor 

@@ -253,9 +253,12 @@
 
         var oArrRight = document.getElementsByClassName("arr-right")[0];
 
         var oArrRight = document.getElementsByClassName("arr-right")[0];
 
         // 获取向左按钮
 
         // 获取向左按钮
 
         var oArrLeft = document.getElementsByClassName("arr-left")[0];
 
         var oArrLeft = document.getElementsByClassName("arr-left")[0];
 
-
 
+        // 获取整个轮播图区域
 
+        var oContainer = document.getElementsByClassName("container")[0];
 
         // 定义全局变量 当前是第几张图片 的索引
 
         // 定义全局变量 当前是第几张图片 的索引
 
         var curIndex = 0;
 
         var curIndex = 0;
 
+        // 定义定时器变量
 
+        var timer = null;
 
 
 
         // 定义切换图片函数
 
         // 定义切换图片函数
 
         function switchImg(index) {
 
         function switchImg(index) {
 
@@ -283,7 +286,7 @@
 
                 // this.classList.add("active");
 
                 // this.classList.add("active");
 
                 // // 给相对应图片添加选中状态
 
                 // // 给相对应图片添加选中状态
 
                 // aImgItems[this.index].classList.add("active");
 
                 // aImgItems[this.index].classList.add("active");
 
-                
+
 
                 // 调用切换图片函数
 
                 // 调用切换图片函数
 
                 switchImg(this.index);
 
                 switchImg(this.index);
 
                 // 更新当前索引值
 
                 // 更新当前索引值
 
@@ -312,6 +315,22 @@
 
             // 调用切换图片函数
 
             // 调用切换图片函数
 
             switchImg(curIndex);
 
             switchImg(curIndex);
 
         }
 
         }
 
+        // 实现定时轮播
 
+        function play() {
 
+            timer = setInterval(function () {
 
+                oArrRight.onclick();
 
+            }, 2000);
 
+        }
 
+        play();
 
+
 
+        // 鼠标移入停止轮播 停止轮播
 
+        oContainer.onmouseover = function () {
 
+            clearInterval(timer);
 
+        }
 
+        // 鼠标移出开始轮播
 
+        oContainer.onmouseout = function () {
 
+            play();
 
+        }
 
     </script>
 
     </script>
 
 </body>
 
 </body>