技能点
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"><</a> 87 <a href="#" id="next" class="arrow">></a> 88 </div> 89 </body> 90 91 </html>
JS
所有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>
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 }
事件委托绑定事件（推荐）
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 }
优化--点击相同小圆点不重复执行代码 if(bnts[index].className == "on"){ return;}
实现图片过渡效果
实现图片无缝切换：新增第一张图片、最后一张图片，切换完毕后再替换整张图片。
图片在切换过程中，注意要是按钮点击无效，否则会影响性能。
点击按钮切换图片：setTimeOut()，clearTimeOut()实现图片过渡
自动轮放图片：setInterval()， clearInterval()