自定义属性作业——带缩略图的轮播切换——JS学习笔记2015-5-31（第44天）
今天看着老师的教程，学习完了自定义属性的章节，同时完成了带缩略图的轮播切换；
收获：1、在写HTML结构的时候发现空格符或者换行符对样式的影响，比如<li></li><li></li>之间如果有空格或者间距会产生间隙；因为现代浏览器基本上都可以解析出来；
2、绝对定位下的水平和垂直居中问题以及复习了解决方案；
3、在这个作业中，应用到了this，自定义属性，for循环，点击事件，动态获取组元素，数组等多种基础知识，可见基础的重要性；
4、收获完成作业时候的那种快感；（这个可能是编程人员解决问题所取得的那种成就感和愉悦感吧:-）
上作业代码，带缩略图的轮播切换：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>自定义属性作业2， 带缩略图轮播图切换</title> 6 7 <style> 8 div, ul ,li{ margin: 0; padding: 0;} 9 li { list-style: none;} 10 a { text-decoration: none;} 11 body { background: #f2f2f2;} 12 #pic { position: relative; margin-top: 100px; background: #143066;} 13 #pic .viewport { width: 560px; height: 280px; overflow: hidden; margin: 0 auto; } 14 #pic span{ position: absolute; left: 50%; top: 50%; margin-top: -40px; width:40px; height: 80px; } 15 #pic span a { display: block; cursor:pointer; width: 100%; height: 100%; text-align: center; line-height: 80px; font-size: 28px; color: #fff; background-color: #000; opacity:0.6; filter:alpha(opacity=60);} 16 #pic span a:hover { opacity: 0.8; filter:alpha(opacity=80);} 17 #pic #prev{ margin-left:-280px;} 18 #pic #next{ margin-left:240px;} 19 #pic #indicators { position: absolute; left: 50%; bottom:0; margin-left:-25%; width: 50%; text-align: center; /*这里用的居中方式，是参照垂直居中的方法，即：把宽度值设定为x；margin-left：-x/2; 此时元素居中，那么如果想要内容剧中的话加上text-align:center;*/} 20 #pic #indicators li { display: inline-block; position: relative; width: 12px; height: 12px; border-radius:50%; margin: 0 4px; background: #bbb; cursor: pointer;} 21 #pic #indicators li:hover { background: #599692} 22 #pic #indicators li div { display: none; position: absolute; top: -40px; left: -22px; width: 50px; height: 25px; border: 3px solid #fff;} 23 #pic #indicators li div img { width: 100%; height: 100%;} 24 </style> 25 26 </head> 27 28 <body> 29 <div id="pic"> 30 <span id="prev"><a href="javascript:;"><</a></span> 31 <div class="viewport"><img id="view_pic"></div> <!-- 先写好位置，等着动态添加轮播图 --> 32 <span id="next"><a href="javascript:;">></a></span> 33 <ul id="indicators"> 34 <li><div><img src="img/s1.jpg"></div></li><li><div><img src="img/s2.jpg"></div></li><li><div><img src="img/s3.jpg"></div></li><li><div><img src="img/s4.jpg"></div></li><!-- // 注意这里如果有空格或者换行，会造成莫名奇妙的li间隔：比如：<li></li> 这里是空格符 <li></li> --> 35 </ul> 36 37 </div> 38 39 <script> 40 var oDiv = document.getElementById('pic'); 41 var oImg = document.getElementById('view_pic'); 42 var oUl = oDiv.getElementsByTagName('ul')[0]; 43 var aLi = oUl.getElementsByTagName('li'); 44 var oPrev = document.getElementById('prev'); 45 var oNext = document.getElementById('next'); 46 var arrUrl = ['img/s1.jpg','img/s2.jpg','img/s3.jpg','img/s4.jpg']; 47 48 49 var num = 0; 50 // 初始化； 51 oImg.src = arrUrl[num]; 52 53 oPrev.onclick = function(){ 54 num--; 55 56 if (num == -1) { 57 num = arrUrl.length-1; 58 }; 59 60 oImg.src = arrUrl[num]; 61 }; 62 oNext.onclick = function(){ 63 num++; 64 65 if (num == arrUrl.length) { 66 num = 0; 67 }; 68 69 oImg.src = arrUrl[num]; 70 } 71 72 for(var i=0; i<aLi.length; i++){ 73 // 这里缩略图的实现，其实是this的应用 74 aLi[i].onmouseover = function(){ 75 76 this.getElementsByTagName('div')[0].style.display = 'block'; 77 78 }; 79 aLi[i].onmouseout = function(){ 80 81 this.getElementsByTagName('div')[0].style.display = 'none'; 82 83 } 84 aLi[i].index = i; 85 aLi[i].onclick = function(){ 86 87 oImg.src = arrUrl[this.index] 88 89 } 90 91 } 92 93 94 </script> 95 </body> 96 </html>
