码迷,mamicode.com
首页 > Web开发 > 详细

自定义属性作业——带缩略图的轮播切换——JS学习笔记2015-5-31(第44天)

时间:2015-06-01 00:46:21      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:

今天看着老师的教程,学习完了自定义属性的章节,同时完成了带缩略图的轮播切换;

收获: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:;">&lt;</a></span>
31       <div class="viewport"><img id="view_pic"></div> <!-- 先写好位置,等着动态添加轮播图 -->
32     <span id="next"><a href="javascript:;">&gt;</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>
View Code

 

自定义属性作业——带缩略图的轮播切换——JS学习笔记2015-5-31(第44天)

标签:

原文地址:http://www.cnblogs.com/zhangxg/p/4542976.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!