从事前端开发好几年了，但js水平仍处于菜鸟水平，之前都是看看这改改那，或者写些常见的交互效果，都涉及到闭包，类等高级用法就蒙了，感觉是时候要好好学习了，不然该下岗了。
下面是我动手写的第一个组件，留下记号，待后面改进。
1 ;(function($){ 2 var Focus = function(poster){ 3 var self = this; 4 this.focusBox = $(poster).find(".focus_inner"); 5 this.li = this.focusBox.find("li"); 6 this.len = this.li.length; 7 this.prevBtn = $(poster).find(".prevBtn"); 8 this.nextBtn = $(poster).find(".nextBtn"); 9 this.dot = $(poster).find(".dot"); 10 this.index = 0; 11 this.liW = this.li.width(); 12 this.timer = ''; //定时器，为了是否自动滚动而存在 13 this.dir = ''; //扩展字段，滚动方向，向上下，左右，渐隐渐出，目前play函数里没做处理，默认为左右滚动 14 15 this.init(); 16 17 this.nextBtn.click(function(){ 18 self.play(); 19 }); 20 this.prevBtn.click(function(){ 21 self.play(); 22 }); 23 }; 24 25 Focus.prototype ={ 26 autoPlay:function(){ 27 var _this = this; 28 _this.timer = window.setInterval(function(){ 29 _this.nextBtn.click(); 30 },5000); 31 32 }, 33 34 stop: function(){ 35 var _this = this; 36 window.clearInterval(_this.timer); 37 }, 38 //动画 39 play: function(){ 40 var _this = this; 41 $(_this.dot).find("span").eq(_this.index).addClass('current').siblings().removeClass(); 42 if (_this.index > _this.len-1){ 43 _this.index = 0; 44 }else if(_this.index < 0){ 45 _this.index = _this.len-1; 46 } 47 $(_this.focusBox).stop().animate({ 48 left:+-_this.liW *_this.index 49 },"slow"); 50 51 _this.index++; 52 53 }, 54 //dot自动填充 55 dotFill: function(){ 56 var _this = this; 57 var html = ''; 58 for (var i = 0; i < _this.len; i++) { 59 html +="<span></span>"; 60 } 61 $(_this.dot).html(html); 62 63 _this.autoPlay(); 64 }, 65 66 init: function(){ 67 var _this = this; 68 var w = _this.liW * _this.len; 69 _this.focusBox.width(w); 70 _this.dotFill(); 71 _this.play(); 72 73 $(_this.dot).find('span').each(function(index, obj) { 74 $(this).click(function() { //页卡点击切换 75 _this.index = index; 76 _this.stop(); 77 _this.play(); 78 79 }); 80 }); 81 82 } 83 84 85 }; 86 87 window["Focus"] = Focus; 88 89 })(jQuery)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="gb2312"> 5 <title>Document</title> 6 <style> 7 body, div, ol, ul, h1, h2, h3, h4, h5, h6, p, th, td, dl, dd, form, iframe, input, textarea, select, label, article, aside, footer, header, menu, nav, section, time, audio, video { 8 margin: 0; 9 padding: 0; 10 } 11 12 article, aside, footer, header, hgroup, nav, section, audio, canvas, video, img { 13 display: block; 14 } 15 16 body { 17 font-size: 100%; 18 font-family: Helvetica,STHeiti,Droid Sans Fallback; 19 -webkit-text-size-adjust: 100%; 20 -ms-text-size-adjust: 100%; 21 -webkit-tap-highlight-color: transparent; 22 } 23 24 textarea { 25 resize: none; 26 } 27 28 iframe, img { 29 border: 0; 30 } 31 32 ul, ol { 33 list-style: none; 34 } 35 36 a { 37 text-decoration: none; 38 } 39 40 .focus { 41 width: 670px; 42 height: 345px; 43 position: relative; 44 overflow: hidden; 45 } 46 .focus ul { 47 width: 9999px; 48 position: absolute; 49 left: 0; 50 } 51 .focus li { 52 width: 670px; 53 height: 345px; 54 float: left; 55 display: inline; 56 } 57 .focus .btn { 58 width: 30px; 59 height: 50px; 60 background: rgba(0, 0, 0, 0.5); 61 position: absolute; 62 top: 50%; 63 margin-top: -25px; 64 cursor: pointer; 65 } 66 .focus .btn:hover { 67 background: rgba(0, 0, 0, 0.8); 68 } 69 .focus .prevBtn { 70 left: 0; 71 } 72 .focus .nextBtn { 73 right: 0; 74 } 75 .focus .dot { 76 width: 100%; 77 position: absolute; 78 bottom: 10px; 79 left: 0; 80 text-align: center; 81 } 82 .focus .dot span { 83 display: inline-block; 84 width: 10px; 85 height: 10px; 86 margin: 0 2px; 87 background: #333; 88 cursor: pointer; 89 } 90 .focus .dot span.current { 91 background: #f30; 92 } 93 </style> 94 95 </head> 96 <body> 97 98 <div class="focus" id="focus"> 99 <ul class="focus_inner"> 100 <li> 101 <a href=""> 102 <img src="http://mat1.gtimg.com/ent/jdt/7041709.jpg" alt=""> 103 </a> 104 </li> 105 <li> 106 <a href=""> 107 <img src="http://mat1.gtimg.com/ent/jdt/7041707.jpg" alt=""> 108 </a> 109 </li> 110 <li> 111 <a href=""> 112 <img src="http://img1.gtimg.com/ent/pics/hv1/87/139/2202/143220582.jpg" alt=""> 113 </a> 114 </li> 115 </ul> 116 <span class="btn prevBtn"></span> 117 <span class="btn nextBtn"></span> 118 <div class="dot"></div> 119 </div> 120 121 <script src="jq路径"></script> 122 <script src="focus的js路径"></script> 123 <script> 124 var focus = new Focus($("#focus")); 125 </script> 126 </body> 127 </html>