fengchuanyu il y a 9 mois
Parent
commit
e13cc64c74
2 fichiers modifiés avec 54 ajouts et 0 suppressions
  1. 31 0
      4_DOM&BOM/13_DOMjs动画.html
  2. 23 0
      4_DOM&BOM/练习6_轮播图.html

+ 31 - 0
4_DOM&BOM/13_DOMjs动画.html

@@ -0,0 +1,31 @@
+<!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: 300px;
+            height: 50px;
+            background-color: red;
+        }
+    </style>
+</head>
+<body>
+    <div class="box"></div>
+    <script>
+        var oBox = document.getElementsByClassName("box")[0];
+        
+        // setTimeout(function(){
+        //     oBox.style.width = "400px"
+        // },2000)
+
+        // offsetWidth 获取元素的宽度
+        // offsetHeight 获取元素高度
+        setInterval(function(){
+            oBox.style.width = oBox.offsetWidth + 10 +"px";
+        },16)
+    </script>
+</body>
+</html>

+ 23 - 0
4_DOM&BOM/练习6_轮播图.html

@@ -134,8 +134,12 @@
         var rightBtn = document.getElementsByClassName("right-btn")[0];
         // 获取向左按钮
         var leftBtn = document.getElementsByClassName("left-btn")[0];
+        // 获取轮播区域标签
+        var oContainer = document.getElementsByClassName("container")[0];
         // 标识当前显示的是第几个
         var nowIndex = 0;
+        // 定义存储定时函数的变量
+        var timer = null;
         
         
 
@@ -160,7 +164,26 @@
             runFun(nowIndex-1)
         }
 
+        //定时轮播
+        function playFun(){
+            timer = setInterval(function(){
+                runFun(nowIndex+1);
+            },1000)
+        }
+        //自动调用函数开始轮播
+        playFun();
+        
 
+        // 鼠标移入轮播图区域停止播放
+        oContainer.onmouseenter = function(){
+            clearInterval(timer);
+        };
+
+        // 鼠标移出轮播图区域继续播放
+        oContainer.onmouseleave = function(){
+            // 重新调用播放轮播函数
+            playFun();
+        }
 
         // 封装函数实现控制第n个按钮和图片的现实
         function runFun(n) {