动手从0开始写的第一个组件-焦点图效果

时间：2022-12-09 09:23:35

从事前端开发好几年了，但js水平仍处于菜鸟水平，之前都是看看这改改那，或者写些常见的交互效果，都涉及到闭包，类等高级用法就蒙了，感觉是时候要好好学习了，不然该下岗了。

下面是我动手写的第一个组件，留下记号，待后面改进。

动手从0开始写的第一个组件-焦点图效果动手从0开始写的第一个组件-焦点图效果
 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)
View Code

 

动手从0开始写的第一个组件-焦点图效果动手从0开始写的第一个组件-焦点图效果
  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>
View Code

 

标签：

相关文章