首页 发现 帮助
登录
lovecoding
/
web0715
10
0
派生 0
文件 工单管理 0 Wiki
浏览代码

add

fengchuanyu 10 月之前
父节点
a2cf4c900c
当前提交
e13cc64c74
共有 2 个文件被更改，包括 54 次插入 和 0 次删除
合并视图 显示文件统计
  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 rightBtn = document.getElementsByClassName("right-btn")[0];
 
         // 获取向左按钮
 
         // 获取向左按钮
 
         var leftBtn = document.getElementsByClassName("left-btn")[0];
 
         var leftBtn = document.getElementsByClassName("left-btn")[0];
 
+        // 获取轮播区域标签
 
+        var oContainer = document.getElementsByClassName("container")[0];
 
         // 标识当前显示的是第几个
 
         // 标识当前显示的是第几个
 
         var nowIndex = 0;
 
         var nowIndex = 0;
 
+        // 定义存储定时函数的变量
 
+        var timer = null;
 
         
         
         
         
 
 
@@ -160,7 +164,26 @@
 
             runFun(nowIndex-1)
 
             runFun(nowIndex-1)
 
         }
 
         }
 
 
 
+        //定时轮播
 
+        function playFun(){
 
+            timer = setInterval(function(){
 
+                runFun(nowIndex+1);
 
+            },1000)
 
+        }
 
+        //自动调用函数开始轮播
 
+        playFun();
 
+        
 
 
+        // 鼠标移入轮播图区域停止播放
 
+        oContainer.onmouseenter = function(){
 
+            clearInterval(timer);
 
+        };
 
+
 
+        // 鼠标移出轮播图区域继续播放
 
+        oContainer.onmouseleave = function(){
 
+            // 重新调用播放轮播函数
 
+            playFun();
 
+        }
 
 
 
         // 封装函数实现控制第n个按钮和图片的现实
 
         // 封装函数实现控制第n个按钮和图片的现实
 
         function runFun(n) {
 
         function runFun(n) {