fengchuanyu 4 月之前
父节点
当前提交
ba8eb6d8a0
共有 2 个文件被更改,包括 58 次插入4 次删除
  1. 29 0
      5_DOM/16_js动画.html
  2. 29 4
      5_DOM/练习6_轮播图.html

+ 29 - 0
5_DOM/16_js动画.html

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

+ 29 - 4
5_DOM/练习6_轮播图.html

@@ -119,8 +119,12 @@
         // 获取左右按钮
         var leftBtn = document.getElementsByClassName("arr-btn")[0];
         var rightBtn = document.getElementsByClassName("arr-btn")[1];
+        // 获取整个轮播图区域
+        var oSwiper = document.getElementsByClassName("container")[0];
         // 定义全局变量放置当前索引值
         var nowIndex = 0;
+        // 定义定时函数全局变量
+        var timer = null;
 
 
         // 定义切换轮播图函数
@@ -152,22 +156,43 @@
         // 绑定向右按钮事件
         rightBtn.onclick = function () {
             // 判断数字是否是最后一个 如果是的从第一个开始
-            if(nowIndex == 4){
+            if (nowIndex == 4) {
                 changeSwiper(0);
-            }else{
+            } else {
                 changeSwiper(nowIndex + 1);
             }
         }
         // 绑定向左按钮事件
         leftBtn.onclick = function () {
             // 判断数字是否是第一个 如果是的从最后一个开始
-            if(nowIndex == 0){
+            if (nowIndex == 0) {
                 changeSwiper(4);
-            }else{
+            } else {
                 changeSwiper(nowIndex - 1);
             }
         }
 
+        // 实现每隔1秒钟自动切换一次
+        function autoChange() {
+            timer = setInterval(function () {
+                if (nowIndex == 4) {
+                    changeSwiper(0);
+                } else {
+                    changeSwiper(nowIndex + 1);
+                }
+            }, 1000);
+        }
+        autoChange();
+
+        // 实现鼠标移入轮播图区域停止自动切换
+        oSwiper.onmouseenter = function () {
+            clearInterval(timer);
+        }
+        // 实现鼠标移出轮播图区域开始自动切换
+        oSwiper.onmouseleave = function () {
+            autoChange();
+        }
+
         // 给数字按钮绑定事件
         // for(var i=0;i<aNumBtn.length;i++){
         //     // 给每个数字按钮绑定一个索引值