慕课网课程学习--焦点轮播图

技能点

DOM操作、定时器、事件运用、JS动画、函数递归、无线滚动

布局实现

外层容器（包含以下几部分）：相对定位

1、图片：绝对定位、float实现图片无缝

2、小圆点：绝对定位、圆角、float实现文字不重合？

3、左右翻页箭头：绝对定位、rgba背景，a:hover

代码：

 1 <!DOCTYPE HTML>
 2 <html>
 3 
 4 <head>
 5     <style type="text/css">
 6     #carousel {
 7         position: relative;
 8         width: 600px;
 9         height: 400px;
10         overflow: hidden;
11     }
12     #imgs {
13         position: absolute;
14         height: 400px;
15         width: 4200px;
16         z-index: 1;
17         overflow: hidden;
18     }
19         #imgs img {
20         float: left;
21     }
22     
23     #prev {
24         left: 20px;
25     }
26     #next {
27         right: 20px;
28     }
29     .arrow {
30         cursor: pointer;
31         line-height: 39px;
32         text-align: center;
33         font-size: 36px;
34         font-weight: bold;
35         width: 40px;
36         height: 40px;
37         background-color: rgba(0, 0, 0, .3);
38         color: #FFF;
39         text-decoration: none;
40         z-index: 2;
41         position: absolute;
42         top: 200px;
43     }
44     .arrow:hover {
45         background-color: rgba(0, 0, 0, .7);
46     }
47     #bnts {
48         position: absolute;
49         bottom: 20px;
50         left: 250px;
51         z-index: 3;
52     }
53     #bnts span {
54         cursor: pointer;
55         float: left;
56         border: 1px solid #FFF;
57         width: 10px;
58         height: 10px;
59         border-radius: 50%;
60         background: #333;
61         margin-right: 5px;
62     }
63     #bnts .on {
64         background-color: #FFF;
65     }
66     </style>
67 
68 </head>
69 
70 <body>
71     <div id="carousel">
72         <div id="imgs" style="left:0px">
73             <img src="img/1.jpg" alt="1" />
74             <img src="img/2.jpg" alt="2" />
75             <img src="img/3.jpg" alt="3" />
76             <img src="img/4.jpg" alt="4" />
77             <img src="img/5.jpg" alt="5" />
78         </div>
79         <div id="bnts">
80             <span class="on"></span>
81             <span></span>
82             <span></span>
83             <span></span>
84             <span></span>
85         </div>
86         <a href="#" id="prev" class="arrow">&lt;</a>
87         <a href="#" id="next" class="arrow">&gt;</a>
88     </div>
89 </body>
90 
91 </html>

View Code

所有JS在window.onload之后执行

点击按钮实现左右更新图片：设置所有图片所在的div的left增加或者减少，获取元素的style属性遇到的问题（内联CSS样式才可以直接获取）。

点击小圆点随意跳转图片：通过循环绑定onclick事件（需要通过闭包处理，不可直接绑定）。推荐方法：事件委托

小圆点HTML

1 <div id="bnts">
2     <span class="on"></span>
3     <span index="1"></span>
4     <span index="2"></span>
5     <span index="3"></span>
6     <span index="4"></span>
7 </div>

View Code

JS var bnt = document.getElementById("bnts");

循环绑定事件（不推荐）

1 for(var i = 0; i<bnts.length; i++) {
2     bnts[i].onclick = function(i) {
3         return function() {
4             showPicture(i);
5         };
6     }(i);
7 }

View Code

事件委托绑定事件（推荐）

1 bnt.onclick = function(e) {
2     e = e || window.event;           //event事件兼容性处理
3     var targetNode = e.target || e.srcElement;      //event事件兼容性处理
4     var index = targetNode.getAttribute("index");
5     showPicture(index);
6 }

View Code

优化--点击相同小圆点不重复执行代码 if(bnts[index].className == "on"){ return;}

实现图片过渡效果

实现图片无缝切换：新增第一张图片、最后一张图片，切换完毕后再替换整张图片。

图片在切换过程中，注意要是按钮点击无效，否则会影响性能。

点击按钮切换图片：setTimeOut()，clearTimeOut()实现图片过渡

自动轮放图片：setInterval()， clearInterval()