08第二种定时器_封装动画函数_轮播图_offset系列

前面复习：

下面会说第二种定时器。

第二种定时器：

第一种的定时器回顾：

另一个定时器 setTimeout() 它是一个一次性的定时器：

因为，代码是从上往下执行的，btn 还没有生成，所以getElementById("btn").onclick = 肯定是会报错的。

它是一次性的定时器，如果没有取消的话，它会一直占着空间，所以一般都要写按钮btn 去取消timeId .

 1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6     </head>
 7     <body>
 8         <input type="button" value="停止" id="btn">
 9 
10         <script src="js/common.js"></script>
11         <script>
12             //注册定时器（一次性的）
13             var timeId = window.setTimeout(function () {
14                 console.log("hehhehe");
15             },5000); //5s 之后调用
16 
17             //注册点击事件 (点击之后取消定时器)
18             getId$("btn").onclick = function () {
19                 window.clearTimeout(timeId);
20             };
21         </script>
22     </body>
23 </html>

一次性的定时器

注：定时器一般还是使用第一种定时器。一次性的定时器用的比较少。

定时器（第一种）案例：协议按钮禁用：

 1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6     </head>
 7     <body>
 8         <textarea name="texta" id="" cols="30" rows="10">必须看完，fasdf进度款sea大姐夫会计法大水坑借方考虑将大家开始的加法，发的空间风口浪尖反倒是咖啡加快。你必须同意才可以注册。
 9 
10         </textarea>
11         <input type="button" value="请仔细阅读协议(5)" id="btn" disabled >
12 
13         <script src="js/common.js"></script>
14         <script>
15             //注册定时器
16             var sec =5;
17             var timeId = window.setInterval(function () {
18                 sec--;
19                 if(sec<0){
20                     window.clearInterval(timeId);  //当sec <0 时，就取消定时器。
21                     getId$("btn").value="同意";
22                     getId$("btn").disabled=false;
23                 }else{
24                     getId$("btn").value="请仔细阅读协议("+sec+")";
25                 }
26             },1000);
27 
28         </script>
29     </body>
30 </html>

View Code

 1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6     </head>
 7     <body>
 8         <textarea name="texta" id="" cols="30" rows="10">必须看完，fasdf进度款sea大姐夫会计法大水坑借方考虑将大家开始的加法，发的空间风口浪尖反倒是咖啡加快。你必须同意才可以注册。
 9 
10         </textarea>
11         <input type="button" value="请仔细阅读协议(5)" id="btn" disabled >
12 
13         <script src="js/common.js"></script>
14         <script>
15             //注册定时器
16             var sec =5;
17             var timeId = window.setInterval(function () {
18                 sec--;
19                 getId$("btn").value="请仔细阅读协议("+sec+")";
20                 if(sec<0){
21                     window.clearInterval(timeId);  //当sec <0 时，就取消定时器。
22                     getId$("btn").value="同意";
23                     getId$("btn").disabled=false;
24                 }
25             },1000);
26 
27         </script>
28     </body>
29 </html>

优化if-else结构之后

定时器案例：div 的渐变：

透明度的设置是通过 style.opacity 来设置的。

opacity 是不透明的意思。

所以 1 代表不透明 0 代表完全透明。

 1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6 
 7         <style>
 8             div{
 9                 width: 300px;
10                 height: 300px;
11                 background-color: darkred;
12             }
13         </style>
14 
15     </head>
16     <body>
17         <div id="dv"></div>
18         <input type="button" value="开始渐变" id="btn">
19 
20 
21         <script src="js/common.js"></script>
22         <script>
23             getId$("btn").onclick = function () {
24                 //其实 渐变是假的， 它真实改变的是透明度
25                 var opacity =10;
26                 var timeId = window.setInterval(function () {
27                     opacity --;
28                     getId$("dv").style.opacity = opacity/10;  //不透明度  (之所以用10是因为整数比小数更精确。)
29 
30                     if(opacity <=0){
31                         window.clearInterval(timeId);
32                     }
33                 },1000); //1 s变一次
34             };
35         </script>
36     </body>
37 </html>

view code

定时器案例：点击按钮设置 div 的宽度：

 1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6 
 7         <style>
 8             *{
 9                 margin:0;
10                 padding:0;
11             }
12             div{
13                 width: 200px;
14                 height: 100px;
15                 background-color: darkred;
16                 border-radius: 50px;
17             }
18         </style>
19     </head>
20     <body>
21         <div id="dv"></div>
22         <input type="button" value="变宽" id="btn">
23         <script src="js/common.js"></script>
24         <script>
25             getId$("btn").onclick = function () {
26                 var width = 200;
27 
28                 var timeId = window.setInterval(function () {
29                     width +=10;
30                     getId$("dv").style.width = width;
31                     if(width>=800){
32                         window.clearInterval(timeId);  //如果大于 等于800 就取消定时器
33                     }
34                 },200);  //0.2s 变宽一次
35             };
36         </script>
37     </body>
38 </html>

View Code

定时器案例：点击按钮移动元素：

这里需要注意的是：对于style中的设置，如果再上面的style中写设置，Js无法直接通过属性名获取到。

但是如果是使用style属性设置的，可以通过js获取。

也不是没办法获取，只是不能直接获取，获取方法如下：

offset+首字母大写的属性名进行获取。例如（offsetLeft）但是就不用再用style了，即getId("dv").offsetLeft; 而不是getId("dv").style.offsetLeft;

 1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6 
 7         <style>
 8             *{
 9                 margin:0;
10                 padding:0;
11             }
12             input{
13                 margin-top: 20px;
14             }
15             div{
16                 width:100px;
17                 height: 50px;
18                 background-color: green;
19                 margin-top: 30px;
20             /*    div要移动，所以要脱离文档流*/
21                 position: absolute;
22                 left: 50px;
23             }
24 
25         </style>
26     </head>
27     <body>
28         <input type="button" value="移动到400" id="btn1">
29         <input type="button" value="移动到800" id="btn2">
30         <div id="dv"></div>
31 
32 
33         <script src="js/common.js"></script>
34         <script>
35             // 点击第一个按钮 移动到400px
36             getId$("btn1").onclick = function(){
37                 var timeId = setInterval(function () {
38                     //获取div 的当前位置
39                     var current = getId$("dv").offsetLeft; //数字类型   没有 px
40                     //速度  每次移动多少px
41                     var step = 10;
42                     current += step;
43                     //将每次移动后的位置 设置上去
44                     getId$("dv").style.left = current +"px";
45                     if(current == 400){
46                         window.clearInterval(timeId);
47                     }
48                 },20); //0.02s
49             };
50             // 点击第二个按钮 移动到800px
51 
52 
53 
54 
55         </script>
56     </body>
57 </html>

移动到400px

它是有问题的，每点击一次按钮就会创建一个定时器，所以如果点击多次按钮就会创建多个定时器，div移动的速度也就越来越快了。

我们现在要做的是无论点击多少次按钮，只开启一个定时器。

 1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6 
 7         <style>
 8             *{
 9                 margin:0;
10                 padding:0;
11             }
12             input{
13                 margin-top: 20px;
14             }
15             div{
16                 width:100px;
17                 height: 50px;
18                 background-color: green;
19                 margin-top: 30px;
20             /*    div要移动，所以要脱离文档流*/
21                 position: absolute;
22                 left: 50px;
23             }
24 
25         </style>
26     </head>
27     <body>
28         <input type="button" value="移动到400" id="btn1">
29         <input type="button" value="移动到800" id="btn2">
30         <div id="dv"></div>
31 
32 
33         <script src="js/common.js"></script>
34         <script>
35             // 点击第一个按钮 移动到400px
36             getId$("btn1").onclick = function(){
37                 var timeId = setInterval(function () {
38                     //获取div 的当前位置
39                     var current = getId$("dv").offsetLeft; //数字类型   没有 px
40                     //速度  每次移动多少px
41                     var step = 10;
42                     current = current<400?current+step:current-step;
43                     //将每次移动后的位置 设置上去
44                     getId$("dv").style.left = current +"px";
45                     if(current == 400){
46                         window.clearInterval(timeId);
47                     }
48                 },20); //0.02s
49             };
50             // 点击第二个按钮 移动到800px
51             getId$("btn2").onclick = function(){
52                 var timeId = setInterval(function () {
53                     //获取div 的当前位置
54                     var current = getId$("dv").offsetLeft; //数字类型   没有 px
55                     //速度  每次移动多少px
56                     var step = 10;
57                     current += step;
58                     //将每次移动后的位置 设置上去
59                     getId$("dv").style.left = current +"px";
60                     if(current == 800){
61                         window.clearInterval(timeId);
62                     }
63                 },20); //0.02s
64             };
65         </script>
66     </body>
67 </html>

View Code

上面代码有很多bug ，下面解决。

封装动画函数：

把上面的逻辑封装成一个函数，

 1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6         <style>
 7             *{
 8                 margin:0;
 9                 padding:0;
10             }
11             input{
12                 margin-top: 20px;
13             }
14             div{
15                 width:100px;
16                 height: 50px;
17                 background-color: green;
18                 margin-top: 30px;
19             /*    div要移动，所以要脱离文档流*/
20                 position: absolute;
21                 left: 50px;
22             }
23 
24         </style>
25     </head>
26     <body>
27         <input type="button" value="移动到400" id="btn1">
28         <input type="button" value="移动到800" id="btn2">
29         <div id="dv"></div>
30 
31 
32         <script src="js/common.js"></script>
33         <script>
34             // 点击第一个按钮 移动到400px
35             getId$("btn1").onclick = function(){
36                animation(getId$("dv"),400);
37             };
38             // 点击第二个按钮 移动到800px
39             getId$("btn2").onclick = function(){
40                 animation(getId$("dv"),800);
41             };
42             function animation(ele, targetPos) {
43                 var timeId = setInterval(function () {
44                     //获取div 的当前位置
45                     var current = ele.offsetLeft; //数字类型   没有 px
46                     //速度  每次移动多少px
47                     var step = 10;
48                     current += step;
49                     //将每次移动后的位置 设置上去
50                     ele.style.left = current +"px";
51                     if(current == targetPos){
52                         window.clearInterval(timeId);
53                     }
54                 },20); //0.02s
55             }
56         </script>
57     </body>
58 </html>

View Code

现在的问题是：回不来和如果step =9的话，不能准确到位置。

 1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6         <style>
 7             *{
 8                 margin:0;
 9                 padding:0;
10             }
11             input{
12                 margin-top: 20px;
13             }
14             div{
15                 width:100px;
16                 height: 50px;
17                 background-color: green;
18                 margin-top: 30px;
19             /*    div要移动，所以要脱离文档流*/
20                 position: absolute;
21                 left: 50px;
22             }
23 
24         </style>
25     </head>
26     <body>
27         <input type="button" value="移动到400" id="btn1">
28         <input type="button" value="移动到800" id="btn2">
29         <div id="dv"></div>
30 
31 
32         <script src="js/common.js"></script>
33         <script>
34             // 点击第一个按钮 移动到400px
35             getId$("btn1").onclick = function(){
36                animation(getId$("dv"),400);
37             };
38             // 点击第二个按钮 移动到800px
39             getId$("btn2").onclick = function(){
40                 animation(getId$("dv"),800);
41             };
42             function animation(ele, targetPos) {
43                 var timeId = setInterval(function () {
44                     //获取div 的当前位置
45                     var current = ele.offsetLeft; //数字类型   没有 px
46                     //速度  每次移动多少px
47                     var step = 10;
48                     step = current<targetPos?step:-step;
49                     //如果还有的距离小于step 就继续走。反之，直接设定为目标
50                     if(Math.abs(targetPos -current) > Math.abs(step)){
51                         current +=step;
52                         ele.style.left = current +"px";
53                     }else{
54                         window.clearInterval(timeId);
55                         ele.style.left = targetPos +"px";
56                     }
57                 },20); //0.02s
58             }
59         </script>
60     </body>
61 </html>

better version

现在的代码中只剩一个问题，就是每次点击按钮都会启动一个定时器，多次点击按钮会是速度增快。

下面解决它。

 1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6         <style>
 7             *{
 8                 margin:0;
 9                 padding:0;
10             }
11             input{
12                 margin-top: 20px;
13             }
14             div{
15                 width:100px;
16                 height: 50px;
17                 background-color: green;
18                 margin-top: 30px;
19             /*    div要移动，所以要脱离文档流*/
20                 position: absolute;
21                 left: 50px;
22             }
23 
24         </style>
25     </head>
26     <body>
27         <input type="button" value="移动到400" id="btn1">
28         <input type="button" value="移动到800" id="btn2">
29         <div id="dv"></div>
30 
31 
32         <script src="js/common.js"></script>
33         <script>
34             // 点击第一个按钮 移动到400px
35             getId$("btn1").onclick = function(){
36                animation(getId$("dv"),400);
37             };
38             // 点击第二个按钮 移动到800px
39             getId$("btn2").onclick = function(){
40                 animation(getId$("dv"),800);
41             };
42             function animation(ele, targetPos) {
43                 //点击的时候先清理定时器  (保证无论点击多少次，都是只有一个定时器在起作用)
44                 window.clearInterval(ele.timeId);  
45                 
46                 ele.timeId = setInterval(function () {
47                     //获取div 的当前位置
48                     var current = ele.offsetLeft; //数字类型   没有 px
49                     //速度  每次移动多少px
50                     var step = 10;
51                     step = current<targetPos?step:-step;
52                     //如果还有的距离小于step 就继续走。反之，直接设定为目标
53                     if(Math.abs(targetPos -current) > Math.abs(step)){
54                         current +=step;
55                         ele.style.left = current +"px";
56                     }else{
57                         window.clearInterval(ele.timeId);
58                         ele.style.left = targetPos +"px";
59                     }
60                 },20); //0.02s
61             }
62         </script>
63     </body>
64 </html>

无论点击多少次，每次都是只有一个定时器在起作用

动画函数总结：

轮播图

简单的轮播图：

轮播图要实现三个功能：
1, 自动切换

2,点击小圆点切换

3,点击左右箭头切换

  1 <!DOCTYPE>
  2 <html lang="en">
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>这是网页标题</title>
  6         <style>
  7             *{
  8                 margin: 0;
  9                 padding: 0;
 10             }
 11             li{
 12                 list-style: none;
 13             }
 14             img{
 15                 vertical-align: top;
 16             }
 17             .box{
 18                 width:520px;
 19                 height: 280px;
 20                 margin: 100px auto;
 21                 padding: 5px;
 22                 border:1px solid #ccc;
 23             }
 24             .inner{
 25                 width:520px;
 26                 height: 280px;
 27                 background-color: pink;
 28                 overflow: hidden;
 29                 position: relative;
 30             }
 31             .inner ul{
 32                 width: 1000%;
 33                 position: absolute;
 34                 top:0;
 35                 left: 0;
 36             }
 37             .inner li{
 38                 float: left;
 39             }
 40             .square{
 41                 position: absolute;
 42                 right: 10px;
 43                 bottom: 10px;
 44 
 45             }
 46             .square span{
 47                 display: inline-block;
 48                 width: 16px;
 49                 height: 16px;
 50                 background-color: #fff;
 51                 text-align: center;
 52                 line-height: 16px;
 53                 cursor: pointer;
 54             }
 55             .square span.current{
 56                 background-color: orange;
 57                 color: #fff;
 58             }
 59 
 60 
 61 
 62         </style>
 63     </head>
 64     <body>
 65         <div class="box" id="box">
 66             <div class="inner"> <!-- 相框-->
 67                 <ul>
 68                     <li><a href="#"><img src="images/0.jpg" alt=""></a></li>
 69                     <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
 70                     <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
 71                     <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
 72                 </ul>
 73                 <div class="square">
 74                     <span class="current">1</span>
 75                     <span>2</span>
 76                     <span>3</span>
 77                     <span>4</span>
 78                 </div>
 79             </div>
 80         </div>
 81         <script src="js/common.js"></script>
 82         <script>
 83             //获取 最外面的 div
 84             var box = getId$("box");
 85             //获取相框
 86             var inner = box.children[0];
 87             //获取ul
 88             var ulObj = inner.children[0];
 89             //获取所有的span
 90             var spanObjs = inner.children[1].children;
 91 
 92             //获取相框的宽度
 93             var imgWidth = inner.offsetWidth;
 94 
 95             //循环所有的span 标签，注册鼠标进入事件
 96             for (var i =0;i<spanObjs.length;i++){
 97                 spanObjs[i].setAttribute("index",i);
 98                 spanObjs[i].onmouseenter = function () {
 99                     //先干掉所有的span 的(类样式)背景颜色
100                     for (var j=0;j<spanObjs.length;j++){
101                         spanObjs[j].removeAttribute("class");
102                     }
103                     //设置当前的span 的（类样式）背景颜色
104                     this.className = "current";
105 
106                     //移动Ul （图片宽度 * 索引值）  但是索引值不能直接拿到，需要事先保存在属性中，（自定义），见上面
107                     var idx = this.getAttribute("index");
108                     //用animation () 函数 这是之前封装的。
109                     animation(ulObj,-idx*imgWidth);
110                 };
111             }
112         </script>
113     </body>
114 </html>

轮播图，本质是存放img的ul在移动

注：这里面是有bug 的，当从第一个直接点到第六个的话，应该以最快的速度移动过去！

再次更新common.js 的代码（新加入动画移动函数 animation() ）：

 1 /**
 2  * 根据id 或者根据tagName 返回相应的元素
 3  * */
 4 function getId$(id){
 5    return document.getElementById(id);
 6 }
 7 function getTags$(tagName) {
 8     return document.getElementsByTagName(tagName)
 9 }
10 
11 //绑定事件 和 取消绑定的 兼容代码：
12 function addEventListener(ele, type, fn) {
13     if(ele.addEventListener){
14         ele.addEventListener(type,fn,false);
15     }else if(ele.attachEvent){
16         ele.attachEvent("on"+type,fn);
17     }else{
18         ele["on"+type] = fn;
19     }
20 }
21 
22 function removeEventListener(ele, type, fn) {
23     if(ele.removeEventListener){
24         ele.removeEventListener(type,fn,false);
25     }else if(ele.detachEvent){
26         ele.detachEvent("on"+type,fn);
27     }else{
28         ele["on"+type] =null;
29     }
30 }
31 
32 /*
33 * 将制定的元素移动到指定的位置
34 * */
35 function animation(ele, targetPos) {  
36     //点击的时候先清理定时器  (保证无论点击多少次，都是只有一个定时器在起作用)
37     window.clearInterval(ele.timeId);
38 
39     ele.timeId = setInterval(function () {
40         //获取div 的当前位置
41         var current = ele.offsetLeft; //数字类型   没有 px
42         //速度  每次移动多少px
43         var step = 10;
44         step = current<targetPos?step:-step;
45         //如果还有的距离小于step 就继续走。反之，直接设定为目标
46         if(Math.abs(targetPos -current) > Math.abs(step)){
47             current +=step;
48             ele.style.left = current +"px";
49         }else{
50             window.clearInterval(ele.timeId);
51             ele.style.left = targetPos +"px";
52         }
53     },20); //0.02s
54 }

View Code

左右焦点轮播图：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         body, ul, li, img {
  8             margin: 0;
  9             padding: 0;
 10             list-style: none;
 11         }
 12         #box {
 13             width: 520px;
 14             height: 280px;
 15             padding: 5px;
 16             position: relative;
 17             border: 1px solid #ccc;
 18             margin: 100px auto;
 19         }
 20         .ad{
 21             width: 520px;
 22             height: 280px;
 23             position: relative;
 24             overflow: hidden;   /*它要 结合 position使用*/
 25         }
 26         ul{
 27             width:2600px;
 28             position: absolute;
 29         }
 30         ul li{
 31             height: 280px;
 32         }
 33         ul a{
 34             display: inline-block;
 35             height: 280px;
 36         }
 37         ul li{
 38             float: left;
 39         }
 40         #focusD{
 41             display: none;
 42         }
 43         #focusD span {
 44             width: 40px;
 45             height: 40px;
 46             background: #000;
 47             border: 1px solid #fff;
 48             opacity: 0.3;
 49 
 50 
 51             position: absolute;
 52             left: 5px;
 53             top: 50%;
 54             margin-top: -20px;
 55             cursor: pointer;
 56             line-height: 40px;
 57             text-align: center;
 58 
 59             font-family: '黑体';
 60             font-size: 30px;
 61             color: #fff;
 62             font-weight: bold;
 63         }
 64         #focusD #right {
 65             right: 5px;!important;
 66             left: auto;
 67         }
 68 
 69     </style>
 70 </head>
 71 <body>
 72     <div id="box" class="all"> <!--相框-->
 73         <div class="ad">
 74             <ul id="imgs">
 75                 <li><a href=""><img src="images/01.jpg"/></a></li>
 76                 <li><a href=""><img src="images/02.jpg"/></a></li>
 77                 <li><a href=""><img src="images/03.jpg"/></a></li>
 78                 <li><a href=""><img src="images/04.jpg"/></a></li>
 79                 <li><a href=""><img src="images/05.jpg"/></a></li>
 80             </ul>
 81         </div>
 82         <div id="focusD"><span id="left">&lt;</span><span id="right">&gt;</span>
 83         </div>
 84     </div>
 85     <script src="js/common.js"></script>
 86     <script>
 87         //获取最外面的 div
 88         var box = getId$("box");
 89         //获取 ad
 90         var ad = box.children[0];
 91         //获取ad 的宽度
 92         var imgWidth = ad.offsetWidth;
 93         //获取 ul
 94         var ulObj = ad.children[0];
 95 
 96 
 97         //获取 左右焦点的div
 98         var forcusD = getId$("focusD");
 99 
100         //鼠标进入box 显示焦点 ，离开异常 焦点
101         box.onmouseenter = function(){
102            focusD.style.display = "block";
103         };
104         box.onmouseleave = function(){
105            focusD.style.display = "none";
106         };
107 
108 
109         //点击右边按钮
110         var index = 0;
111         getId$("right").onclick = function () {
112             if(index <ulObj.children.length-1){
113                 index ++;
114                 animation(ulObj,-index*imgWidth);
115             }
116         };
117         //点击左边按钮
118         getId$("left").onclick = function () {
119             if(index >0){
120                 index--;
121                 animation(ulObj,-index*imgWidth);
122             }
123         };
124     </script>
125 </body>
126 </html>

View Code

无缝连接的轮播图：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         * {
 8             margin: 0;
 9             padding: 0;
10         }
11         li {
12             list-style: none;
13             /*height: 280px;*/ /*它的作用和下面的img 的作用一样 */
14         }
15         img {
16             vertical-align: top;
17         }
18         /*取消图片底部3像素距离*/
19         .box {
20             width: 520px;
21             height: 280px;
22             border: 1px solid red;
23             padding: 5px;
24             margin: 100px auto;
25             position: relative;
26         }
27         .box .inner{
28             width: 520px;
29             height: 280px;
30             position: relative;
31             overflow: hidden;
32         }
33         .box ul {
34             width: 2600px;
35             position: absolute;
36             left: 0;
37             top: 0;
38         }
39         .box ul li {
40             float: left;
41         }
42     </style>
43 </head>
44 <body>
45     <div class="box" id="screen">
46         <div class="inner">
47             <ul>
48                 <li><img src="images/01.jpg" alt=""></li>
49                 <li><img src="images/02.jpg" alt=""></li>
50                 <li><img src="images/03.jpg" alt=""></li>
51                 <li><img src="images/04.jpg" alt=""></li>
52                 <li><img src="images/01.jpg" alt=""></li>
53             </ul>
54         </div>
55     </div>
56     <script src="js/common.js"></script>
57     <script>
58         var current = 0;
59         function func() {
60             current -= 520;
61             //获取到ul 标签
62             var ulObj = getId$("screen").children[0].children[0];
63             ulObj.style.left =current +"px";
64             if(current <= -2080) {
65                 current = 0;
66                 ulObj.style.left = 0 + "px";
67             }
68         }
69         var timeId =  window.setInterval(func,1000);
70         //鼠标进入就停止 轮播
71         getId$("screen").onmouseenter = function () {
72             window.clearInterval(timeId);
73         };
74         //鼠标离开就 继续
75         getId$("screen").onmouseleave = function () {
76             //再开一个定时器
77             timeId = window.setInterval(func,1000);
78         };
79     </script>
80 </body>
81 </html>

View Code

完整的轮播图（重点）：

完整的轮播图有三个功能：

1，下面有按钮

2，左右有焦点箭头

3，可以自动无缝切换。

  1 <!DOCTYPE html>
  2 <html lang="en">
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>这是网页标题</title>
  6         <style type="text/css">
  7             * {
  8                 padding: 0;
  9                 margin: 0;
 10                 list-style: none;
 11                 border: 0;
 12             }
 13 
 14             .all {
 15                 width: 500px;
 16                 height: 200px;
 17                 padding: 7px;
 18                 border: 1px solid #ccc;
 19                 margin: 100px auto;
 20                 position: relative;
 21             }
 22 
 23             .frame {
 24                 width: 500px;
 25                 height: 200px;
 26                 overflow: hidden;
 27                 position: relative;
 28             }
 29 
 30             .frame li {
 31                 width: 500px;
 32                 height: 200px;
 33                 overflow: hidden;
 34                 float: left;
 35             }
 36 
 37             .frame ul {
 38                 position: absolute;
 39                 left: 0;
 40                 top: 0px;
 41                 width: 3000px;
 42             }
 43 
 44             .all ol {
 45                 position: absolute;
 46                 right: 10px;
 47                 bottom: 10px;
 48                 line-height: 20px;
 49                 text-align: center;
 50             }
 51 
 52             .all ol li {
 53                 float: left;
 54                 width: 20px;
 55                 height: 20px;
 56                 background: #fff;
 57                 border: 1px solid #ccc;
 58                 margin-left: 10px;
 59                 cursor: pointer;
 60             }
 61 
 62             .all ol li.current {
 63                 background: #DB192A;
 64             }
 65 
 66             #arrow {
 67                 display: none;
 68             }
 69 
 70             #arrow span {
 71                 width: 40px;
 72                 height: 40px;
 73                 position: absolute;
 74                 left: 5px;
 75                 top: 50%;
 76                 margin-top: -20px;
 77                 background: #000;
 78                 cursor: pointer;
 79                 line-height: 40px;
 80                 text-align: center;
 81                 font-weight: bold;
 82                 font-family: '黑体';
 83                 font-size: 30px;
 84                 color: #fff;
 85                 opacity: 0.3;
 86                 border: 1px solid #fff;
 87             }
 88 
 89             #arrow #right {
 90                 right: 5px;
 91                 left: auto;
 92             }
 93         </style>
 94     </head>
 95     <body>
 96         <div class="all" id='box'>
 97             <div class="frame">  <!--相框-->
 98                 <ul>
 99                     <li><img src="https://i0.hdslb.com/bfs/archive/f82e1715d1c57b72825ca3938b98dbf69a56951e.png@880w_440h.png"
100                              width="500" height="200"/></li>
101                     <li><img
102                             src="https://i0.hdslb.com/bfs/sycp/creative_img/201911/30c5024e3f3be4c1e48c1e1920b4cdbc.jpg@880w_440h.jpg"
103                             width="500" height="200"/></li>
104                     <li><img src="https://i0.hdslb.com/bfs/archive/2577043c0a90ee3a1816bc217bc727353b011b8d.jpg@880w_440h.webp"
105                              width="500" height="200"/></li>
106                 </ul>
107                 <ol>  <!--ol 中放的是 小按钮，通过动态得到li 的个数然后再设置按钮个数 -->
108                 </ol>
109             </div>
110             <div id="arrow"><span id="left">&lt;</span><span id="right">&gt;</span></div>
111         </div>
112         <script src="js/common.js"></script>
113         <script>
114             //一
115             //1获取 最外面的div
116             var all = getId$("box");
117             //2获取 相框
118             var picFrame = all.children[0];
119             var width = picFrame.offsetWidth;  //获取相框的宽度
120             //3相框中有 两个元素 ul图片 和 ol 小按钮
121             var ulObj = picFrame.children[0];
122             var olObj = picFrame.children[1];
123             //ul 中的所有li 对象
124             var imglists = ulObj.children;  //可以通过对象获取li的个数
125             //4获取焦点的 div
126             // var arrow = all.children[1];
127             var arrow = getId$("arrow");
128 
129             var idx = 0; //全局变量 ，为了使得当点击箭头时候，和按钮的效果保持一致
130             //二 创建小按钮
131             for(var i=0;i<imglists.length;i++){
132                 var liObj = document.createElement("li");
133                 //添加自定义属性idx 为了能够找到它,计算移动的距离时候使用
134                 liObj.setAttribute("index",i);
135                 liObj.innerText = i+1;
136                 olObj.appendChild(liObj);
137 
138                 //注册鼠标点击事件
139                 liObj.onmouseenter = function () {
140                     //1 先干掉所有ol中的背景颜色
141                     var btns = olObj.children;
142                     for (var i=0;i<btns.length;i++){
143                         btns[i].removeAttribute("class");//它会直接删除class 这个属性
144                         // btns[i].className ="";  //它不会去掉class这个属性，
145                     }
146                     //2 设置当前的li 背景颜色
147                     this.className = "current";
148                     // var cur = liObj.getAttribute("idx");  //错误
149                     // btns[cur].className = "current";
150 
151                     //3 获取当前按钮中 index 值
152                     idx = this.getAttribute("index");
153                     animation(ulObj,-idx*width);
154                 };
155             }
156             //设置 ol中第一个小按钮的背景颜色
157             olObj.children[0].className = "current";
158 
159             //三 克隆 第一个li 
160             //克隆ul 中第一个li 然后加入到ul 的最后
161             var newLi =  ulObj.children[0].cloneNode(true);  //参数true 表示克隆包含标签中的内容
162             ulObj.appendChild(newLi);
163 
164             //四 鼠标进入最外面div 显示左右箭头
165             all.onmouseenter = function () {
166                 arrow.style.display = "block";
167             };
168             //鼠标离开最外面div 显示左右箭头
169             all.onmouseleave = function () {
170                 arrow.style.display = "none";
171             };
172             //五 左右按钮点击事件
173             function clickRight() {
174                 if(idx == imglists.length - 1){
175                     idx = 0;
176                     ulObj.style.left = "0px";
177                 }
178                 idx++;
179                 animation(ulObj,-idx*width);
180 
181                 //如果idx == imglists.length-1，此时用户以为的是第一张图片 实际是最后一张
182                 if(idx == imglists.length-1 ){
183                     olObj.children[imglists.length -2].removeAttribute("class");
184                     olObj.children[0].className = "current";
185                 }else{
186                     //清除所有的颜色
187                     var btns = olObj.children;
188                     for (var i=0;i<btns.length;i++){
189                         btns[i].removeAttribute("class");
190                     }
191                     //设置当前的有背景颜色
192                     btns[idx].className = "current";
193                 }
194             };
195             getId$("right").onclick = clickRight;
196             getId$("left").onclick = function () {
197                 if(idx == 0){
198                     ulObj.style.left =-(imglists.length-1)*width + "px";
199                     idx = imglists.length - 1;
200                 }
201                 idx --;
202                 animation(ulObj,-idx*width);
203 
204                 //下面改变按钮的颜色
205                 var btns = olObj.children;
206                 for (var i=0 ;i<btns.length;i++){
207                     btns[i].removeAttribute("class");
208                 }
209                 btns[idx].className = "current";
210             }
211 
212             //六 实现轮播图的自动功能
213             //来个定时器，不停的调用点击按钮 事件处理函数  即可
214                 //首先要手动调用一次 函数
215             clickRight();
216             var timeId = window.setInterval(clickRight,2000);  //2s 调用一次 右面按钮 事件处理函数
217             //鼠标进入最外面的div 清理定时器
218             all.onmouseenter = function () {
219                 window.clearInterval(timeId);
220             };
221             //鼠标离开最外面定时器 再次设定一个新的定时器
222             all.onmouseleave = function () {
223                 timeId = window.setInterval(clickRight,2000);
224             }
225         </script>
226     </body>
227 </html>

View Code

offset系列：

三大系列：

现在是offset系列中的属性。

注：通过style.width 是得不到的。

继续：

当子级元素没有脱离文档流时，

当子级元素脱离文档流时，

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         * {
 8             margin: 0;
 9             padding: 0;
10         }
11         input{
12             position: absolute;
13             top: 250px;
14         }
15         #dv1{
16             width: 200px;
17             height: 200px;
18             background-color: red;
19             margin-left: 100px;
20             padding-left: 20px;
21             border: 10px solid cyan;
22             position: relative;
23         }
24         #dv2{
25             width: 50px;
26             height: 50px;
27             background-color: green;
28             position: absolute;
29             left: 10px;
30         }
31 
32     </style>
33 </head>
34 <body>
35     <div id="dv1">
36         <div id="dv2"></div>
37     </div>
38     <input type="button" value="显示效果" id="btn">
39     <script src="js/common.js"></script>
40     <script>
41         getId$("btn").onclick = function () {
42             console.log(getId$("dv2").offsetLeft);
43         };
44     </script>
45 </body>
46 </html>

View Code

总结就是当子级元素没有脱标时，offset和父级元素的margin border padding 还有自己的margin都有关

如果子级元素脱标时，offset 和父级就没关系了，只和自己的 left 和 margin 有关了。

直接通过document 获取元素：

获取body title html 。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页的标题</title>
 6     </head>
 7     <body>
 8 
 9         <script src="js/common.js"></script>
10         <script>
11             //获取  body
12             console.log(document.body); //因为只有一个 它得到的是标签，是个元素
13             //获取  title
14             console.log(document.title);   //它得到的是 里面的值
15             document.title = "我是个大帅哥"; //修改标题
16             //获取 html
17             // console.log(document.html); //这是不对的。应该如下
18             console.log(document.documentElement);   //它才是html
19 
20         </script>
21     </body>
22 </html>

View Code

案例：图片跟着鼠标飞：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页的标题</title>
 6         <style>
 7             img{
 8                 width: 50px;
 9                 height: 50px;
10                 position: absolute;
11             }
12         </style>
13     </head>
14     <body>
15         <img src="images/01.jpg" alt="" id="img">
16         <script src="js/common.js"></script>
17         <script>
18             document.onmousemove = function (evt) {
19                 getId$("img").style.left = evt.clientX +"px";
20                 getId$("img").style.top = evt.clientY +"px";
21             };
22         </script>
23     </body>
24 </html>

里面是有bug 的！

posted @ 2019-10-28 00:02 Zcb0812 阅读(227) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

08第二种定时器_封装动画函数_轮播图_offset系列

前面复习：

第二种定时器：

定时器（第一种）案例：协议按钮禁用：

定时器 案例：div 的渐变：

定时器 案例：点击按钮设置 div 的宽度：

定时器 案例：点击按钮移动元素：

封装动画函数：

轮播图

简单的轮播图：

左右焦点轮播图：

无缝连接的轮播图：

完整的轮播图（重点）：

offset系列：

直接通过document 获取元素：

案例：图片跟着鼠标飞：

公告

定时器案例：div 的渐变：

定时器案例：点击按钮设置 div 的宽度：

定时器案例：点击按钮移动元素：