009 轮播图，offset系列

　　关于使用JS做轮播图，使用一个章节进行笔迹。

一：简单轮播图

1.程序

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         * {
  8             margin: 0;
  9             padding: 0;
 10             list-style: none;
 11             border: 0;
 12         }
 13         .all {
 14             width: 500px;
 15             height: 200px;
 16             padding: 7px;
 17             border: 1px solid #ccc;
 18             margin: 100px auto;
 19             position: relative;  /*主要用于左右箭头的定位*/
 20         }
 21         .screen {
 22             width: 500px;
 23             height: 200px;
 24             overflow: hidden;
 25             position: relative;
 26         }
 27         .screen ul {
 28             position: absolute;
 29             left: 0;
 30             top: 0;
 31             width: 3000px;   /*将图片都装进来*/
 32         }
 33         .screen li {
 34             float: left;
 35             width: 500px;
 36             height: 200px;
 37         }
 38         /*-序号-*/
 39         .screen ol {
 40             position: absolute;
 41             left: 50%;
 42             bottom: 10px;
 43             line-height: 20px;
 44             text-align: center;
 45         }
 46         .screen ol li {
 47             float: left;
 48             width: 20px;
 49             height: 20px;
 50             background-color: #fff;
 51             border: 1px solid #ccc;
 52             margin-left: 10px;
 53             cursor: pointer;
 54             border-radius: 5px;
 55         }
 56         .screen ol li.current {
 57             background-color: #DB192A;
 58         }
 59         #arr span {
 60             width: 40px;
 61             height: 40px;
 62             position: absolute;
 63             left: 5px;
 64             top: 50%;
 65             margin-top: -20px;
 66             background: #000;
 67             cursor: pointer;
 68             line-height: 40px;
 69             text-align: center;
 70             font-family: "黑体";
 71             font-size: 30px;
 72             font-weight: bold;
 73             color: #fff;
 74             opacity: 0.3;
 75             border: 1px solid #ffffff;
 76         }
 77         #arr #right {
 78             right: 5px;
 79             left: auto;
 80         }
 81         #arr {
 82             display: none;
 83         }
 84     </style>
 85 </head>
 86 <body>
 87     <div id="box" class="all">
 88         <div class="screen">
 89             <ul>
 90                 <li><img src="images/1.jpg" alt="" width="500" height="200"></li>
 91                 <li><img src="images/2.jpg" alt="" width="500" height="200"></li>
 92                 <li><img src="images/3.jpg" alt="" width="500" height="200"></li>
 93                 <li><img src="images/4.jpg" alt="" width="500" height="200"></li>
 94                 <li><img src="images/5.jpg" alt="" width="500" height="200"></li>
 95             </ul>
 96             <ol>
 97                 <!--序号-->
 98             </ol>
 99         </div>
100         <div id="arr">
101             <span id="left">&lt;</span>
102             <span id="right">&gt;</span>
103         </div>
104     </div>
105 
106     <script>
107         //获取一些使用的数据
108         var box = document.getElementById("box");
109         var screenObj = box.children[0];
110         var imgWidth = screenObj.offsetWidth;
111         var ulObj = screenObj.children[0];
112         var listObj = ulObj.children;
113         var olObj = screenObj.children[1];
114         var arr = document.getElementById("arr");
115 
116         //同步全局变量
117         var pic = 0;
118 
119         for(var i=0; i<listObj.length; i++){
120             //创建ol中的li
121             var li = document.createElement("li");
122             olObj.appendChild(li);
123             li.innerHTML=i+1;
124             li.setAttribute("index",i);
125             //注册鼠标进入事件
126             li.onmouseover=function () {
127                 for (var j=0; j<olObj.children.length; j++){
128                     olObj.children[j].removeAttribute("class");
129                 }
130                 this.className="current";
131                 pic = this.getAttribute("index");
132                 animate(ulObj, -pic * imgWidth);  //移动图片
133             }
134         }
135         olObj.children[0].className="current";   //刚进入的初始化
136         ulObj.appendChild(ulObj.children[0].cloneNode(true));   //在后面再添加一张第一张的图片
137 
138         //进行自动播放轮播
139         var timeId = setInterval(clickHandle, 200000000);
140 
141         //鼠标进入div，显示左右箭头，停止定时器
142         box.onmouseover=function () {
143             arr.style.display="block";
144             clearInterval(timeId);
145         }
146         //鼠标退出div，影藏左右箭头，继续定时器
147         box.onmouseout=function () {
148             arr.style.display="none";
149             timeId = setInterval(clickHandle, 2000);
150         }
151 
152         function clickHandle() {
153             if(pic==listObj.length-1){
154                 pic=0;
155                 ulObj.style.left=0+"px";
156             }
157             pic++;
158             animate(ulObj, -pic * imgWidth);
159             if(pic==listObj.length-1){
160                 olObj.children[olObj.children.length-1].className="";
161                 olObj.children[0].className="current";
162             }else{
163                 for(var k=0;k<olObj.children.length; k++){
164                     olObj.children[k].removeAttribute("class");
165                 }
166                 olObj.children[pic].className="current";
167             }
168         }
169 
170         //右边按钮
171         document.getElementById("right").onclick=clickHandle;
172 
173         //左边按钮
174         document.getElementById("left").onclick=function () {
175             if(pic==0){
176                 pic=5;
177                 ulObj.style.left=-pic * imgWidth + "px";
178             }
179             pic--;
180             animate(ulObj, -pic * imgWidth);
181             for(var v=0; v<olObj.children.length; v++){
182                 olObj.children[v].removeAttribute("class");
183             }
184             olObj.children[pic].className="current";
185         }
186 
187         //移动到任意位置
188         function animate(ele, target) {
189             clearInterval(ele.timeId);
190             ele.timeId = setInterval(function () {
191                 var current = ele.offsetLeft;
192                 var step = 10;
193                 step = current<target?step:-step;
194                 current+=step;
195                 if(Math.abs(current-target)>Math.abs(step)){
196                     ele.style.left=current+"px";
197                 }else{
198                     clearInterval(ele.timeId);
199                     ele.style.left=target+"px";
200                 }
201             },10);
202         }
203 
204     </script>
205 </body>
206 </html>

2.效果：

二：offset系列

1..offsetLeft

　　没有脱离文档流：

　　　　父级元素margin+父级元素的padding+父级元素的border+自己的margin。

　　脱离文档流：

　　　　主要是自己的left+自己的margin

三：document获取元素

1.通过document获取元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <script>
 9         //获取body
10         console.log(document.body);
11         //获取title
12         console.log(document.title);
13         //获取html
14         console.log(document.documentElement);
15     </script>
16 </body>
17 </html>

2.图片跟着鼠标飞

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         img {
 8             position: absolute;
 9         }
10     </style>
11 </head>
12 <body>
13     <img src="demo/image/00_7.jpg" alt="" id="img" width="300px">
14     <script>
15         document.onmousemove=function (e) {
16             document.getElementById("img").style.left=e.clientX+"px";
17             document.getElementById("img").style.top=e.clientY+"px";
18         }
19     </script>
20 </body>
21 </html>