[JQuery]用InsertAfter實現圖片走馬燈展現效果2——js代碼重構

時間 2020-06-16

標籤 jquery insertafter 實現圖片走馬燈展現效果代碼欄目 JQuery 简体版

原文原文鏈接

寫在前面

前面寫過一篇文章《[JQuery]用InsertAfter實現圖片走馬燈展現效果》，自從寫過那樣的也算是使用面向對象的寫法吧，代碼實在醜陋，自從寫過那樣的代碼，就是本身的一塊心病，總感受不完美，內心一直惦記着那件事，也是在我寫過那篇文章以後，沒多久，在博客園首頁看到了一篇文章較複雜js的書寫格式，這裏的代碼看着比較簡介，就想着抽時間將以前的那段js代碼進行重構。說作就作，不想想起以前寫過那樣的代碼，內心就有疙瘩。因此也就有了這篇文章。javascript

$.extend

在開始重構以前，須要先學習一下$.extend()方法，以前雖然見過它，但並不瞭解它，爲了加深彼此的瞭解，因此先對它進行初步的學習，並在之後的項目中，常常的去使用它，達到彼此熟悉。css

extend的意思就是擴展，$.extend()就是jquery的擴展方法。html

$.extend()方法原型java

$.extend(dest,src1,src2,src3....);

含義：將src1,src2,src3...合併到dest中,返回值爲合併後的des,由此能夠看出該方法合併後，是修改了des的結構的。若是想要獲得合併的結果卻又不想修改dest的結構，能夠以下使用：jquery

var newSrc=$.extend({},src1,src2,src3...)//也就是將"{}"做爲dest參數。

這樣就能夠將src1,src2,src3...進行合併，而後將合併結果返回給newSrc了。以下例：ide

    <script src="Script/jquery-1.10.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        var result = $.extend({},{ name: "Tom", age: 21 },{ name: "Jerry", sex: "Boy" });
        alert("name:" + result.name + "  age:" + result.age + "   sex:" + result.sex);
    </script>

結果：post

也就是說後面的參數若是和前面的參數存在相同的名稱，那麼後面的會覆蓋前面的參數值，若是爲後面的對象添加一個age屬性並設置爲11，則結果以下：學習

1     <script type="text/javascript">
2         var result = $.extend({}, { name: "Tom", age: 21 }, { name: "Jerry",age:11, sex: "Boy" });
3         alert("name:" + result.name + "  age:" + result.age + "   sex:" + result.sex);
4     </script>

結果ui

省略dest參數this

上述的extend方法原型中的dest參數是能夠省略的，若是省略了，則該方法就只能有一個src參數，並且是將該src合併到調用extend方法的對象中去，如：

    <script type="text/javascript">
        $.extend({ hello: function () { alert('hello'); } });
        $.hello();
    </script>

結果

就是將hello方法合併到jquery的全局對象中。

$.fn.extend(src)

該方法將src合併到jquery的實例對象中去，如:

單擊按鈕，調用擴展方法hello。

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <script src="Script/jquery-1.10.2.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         $.fn.extend({ hello: function () { alert('hello'); } });
 9         $(function () {
10             //jquery實例對象$("#btn")
11             $("#btn").hello();
12         });
13     </script>
14 </head>
15 <body>
16     <input type="button"  name="name" value="按鈕" id="btn" />
17 </body>
18 </html>

結果

頁面加載，調用按鈕jquery對象實例的hello方法。

幾個例子

    <script type="text/javascript">
        //這是在jquery全局對象中擴展一個net命名空間。
        $.extend({ net: {} });
        //這是將hello方法擴展到以前擴展的Jquery的net命名空間中去。
        $.extend($.net, {
            hello: function () {
                alert("net.hello");
            }
        });
        //調用net下的hello
        $.net.hello();

結果爲彈出「net.hello」

jquery.extend()另一個原型

$.extend(boolean,dest,src1,src2,src3...)

第一個參數boolean表明是否進行深度拷貝，其他參數和前面介紹的一致，什麼叫深層拷貝，咱們看一個例子：

 1     <script type="text/javascript">
 2         var result = $.extend(true, {},
 3             {
 4                 name: "John",
 5                 location:
 6                     { city: "Boston", county: "USA" }
 7             }, {
 8                 last: "Resig",
 9                 location:
10                     { state: "MA", county: "China" }
11             });
12     </script>

咱們能夠看出src1中嵌套子對象location:{city:"Boston"},src2中也嵌套子對象location:{state:"MA"},第一個深度拷貝參數爲true，那麼合併後的結果就是：

 1     <script type="text/javascript">
 2         var result = $.extend(true, {},
 3             {
 4                 name: "John",
 5                 location:
 6                     { city: "Boston", county: "USA" }
 7             }, {
 8                 last: "Resig",
 9                 location:
10                     { state: "MA", county: "China" }
11             });
12         alert("name:" + result.name
13             + "\r\nlast:"   + result.last
14             + "\r\nlocation.state:" + result.location.state
15             + "\r\nlocation.county:" + result.location.county
16             + "\r\nlocation.city:" + result.location.city)
17     </script>

結果

也就是說它會將src中的嵌套子對象也進行合併，而若是第一個參數boolean爲false，咱們看看合併的結果是什麼，以下：

 1        var result = $.extend(false, {},
 2             {
 3                 name: "John",
 4                 location:
 5                     { city: "Boston", county: "USA" }
 6             }, {
 7                 last: "Resig",
 8                 location:
 9                     { state: "MA", county: "China" }
10             });

參考文章：http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html

重構代碼

學習了上面的extend方法，那麼下面就對上篇文章中的圖片走馬展現的js進行重寫。

代碼以下：

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <title></title>
  6     <link href="Css/Style.css" rel="stylesheet" />
  7     <script src="Script/jquery-1.10.2.js"></script>
  8 
  9     <script type="text/javascript">
 10         var Tearchers = [{
 11             "id": "1",
 12             "T1": "萌萌雨1",
 13             "T2": "上海復旦大學碩士學位1",
 14             "T3": "追求完美與一身的現代化教師女性，才華橫溢一表人才,優秀教師1",
 15             "imgsrc": "imges/teach_1.png"
 16         },
 17          {
 18              "id": "2",
 19              "T1": "萌萌雨2",
 20              "T2": "上海復旦大學碩士學位2",
 21              "T3": "追求完美與一身的現代化教師女性，才華橫溢一表人才,優秀教師2",
 22              "imgsrc": "imges/teach_2.png"
 23 
 24          },
 25          {
 26              "id": "3",
 27              "T1": "萌萌雨3",
 28              "T2": "上海復旦大學碩士學位3",
 29              "T3": "追求完美與一身的現代化教師女性，才華橫溢一表人才,優秀教師3",
 30              "imgsrc": "imges/teach_3.png"
 31          }, {
 32              "id": "4",
 33              "T1": "萌萌雨4",
 34              "T2": "上海復旦大學碩士學位4",
 35              "T3": "追求完美與一身的現代化教師女性，才華橫溢一表人才,優秀教師4",
 36              "imgsrc": "imges/teach_4.png"
 37          }, {
 38              "id": "5",
 39              "T1": "萌萌雨5",
 40              "T2": "上海復旦大學碩士學位5",
 41              "T3": "追求完美與一身的現代化教師女性，才華橫溢一表人才,優秀教師5",
 42              "imgsrc": "imges/teach_5.png"
 43          }
 44          , {
 45              "id": "6",
 46              "T1": "萌萌雨6",
 47              "T2": "上海復旦大學碩士學位6",
 48              "T3": "追求完美與一身的現代化教師女性，才華橫溢一表人才,優秀教師6",
 49              "imgsrc": "imges/teach_6.png"
 50 
 51          }, {
 52              "id": "7",
 53              "T1": "萌萌雨7",
 54              "T2": "上海復旦大學碩士學位7",
 55              "T3": "追求完美與一身的現代化教師女性，才華橫溢一表人才,優秀教師7",
 56              "imgsrc": "imges/teach_7.png"
 57 
 58          }, {
 59              "id": "8",
 60              "T1": "萌萌雨8",
 61              "T2": "上海復旦大學碩士學位8",
 62              "T3": "追求完美與一身的現代化教師女性，才華橫溢一表人才,優秀教師8",
 63              "imgsrc": "imges/teach_8.png"
 64 
 65          }, {
 66              "id": "9",
 67              "T1": "萌萌雨9",
 68              "T2": "上海復旦大學碩士學位9",
 69              "T3": "追求完美與一身的現代化教師女性，才華橫溢一表人才,優秀教師9",
 70              "imgsrc": "imges/teach_9.png"
 71 
 72          },
 73         ];
 74 
 75         //滾動圖片對象
 76         var srcollImages = {
 77             //timer句柄
 78             timerHandle: null,
 79 
 80             //初始化操做
 81             init: function (options) {
 82                 var newoptions = this.setOptions(options);
 83                 //設置高亮li
 84                 this.getHightLightLi(newoptions);
 85                 //開啓定時器
 86                 this.timerStart(newoptions);
 87                 //鼠標懸停操做
 88                 this.hoverElement(newoptions);
 89                 //單擊操做處理
 90                 this.clickElement(newoptions);
 91             },
 92             //設置參數
 93             setOptions: function (options) {
 94                 var defaultoptions = {
 95                     interval: 1000,//定時器時間間隔
 96                     //容器
 97                     "scrollContainer": null,
 98                 }
 99                 //擴展默認配置進行擴展
100                 return $.extend({}, defaultoptions, options || {})
101             },
102             //開啓定時器
103             timerStart: function (options) {
104                 var self = this;
105                 self.timerHandle = setInterval(function myfunction() {
106                     self.firstInsertAfterLast();
107                     var $hightli = self.getHightLightLi(options.scrollContainer);
108                     $hightli.removeClass("Zzhao_cent").addClass("Zzhao").next().removeClass("Zzhao").addClass("Zzhao_cent");
109                 },options.interval)
110             },
111             //中止定時器
112             timerStop: function (options) {
113                 clearInterval(this.timerHandle);
114             },
115             hoverElement: function (options) {
116                 //獲得當前對象
117                 var self = this;
118                 $("ul li").hover(function () {
119                     self.timerStop(options);
120                 }, function () {
121                     self.timerStart(options);
122                 })
123             },
124             clickElement: function (options) {
125                 $("ul li").each(function () {
126                     $(this).click(function () {
127                         var selfclik = $(this);
128                         //中止定時器
129                         clearInterval(self.timerHandle);
130                         //只對普通的照片進行處理，高亮居中的照片再也不處理
131                         if ($(this).hasClass("Zzhao")) {
132                             //index()方法用來獲取jquery對象的位置索引
133                             var currentIndex = $(this).index();
134                             //高亮圖片的索引位置，以中間高亮圖片爲原點
135                             var hightIndex = $(".Zzhao_cent").index();
136                             //currentIndex > hightIndex說明單擊的圖片在高亮圖片右邊
137                             if (currentIndex > hightIndex) {
138                                 //移動的步數
139                                 var step = currentIndex - hightIndex;
140                                 $(this).removeClass("Zzhao").addClass("Zzhao_cent");
141                                 $(this).siblings().removeClass("Zzhao").removeClass("Zzhao_cent").addClass("Zzhao");
142                                 //移動多少次
143                                 for (var i = 0; i < step; i++) {
144                                     srcollImages.firstInsertAfterLast();
145                                 }
146                             } else {
147                                 //中間高亮圖片以前的單擊處理
148                                 //移動的步數
149                                 var step = currentIndex + hightIndex + 1;
150                                 $(this).removeClass("Zzhao").addClass("Zzhao_cent");
151                                 $(this).siblings().removeClass("Zzhao").removeClass("Zzhao_cent").addClass("Zzhao");
152                                 //移動多少次
153                                 for (var i = 0; i < step; i++) {
154                                     srcollImages.firstInsertAfterLast();
155                                 }
156                             }
157                             for (var i = 0; i < Tearchers.length; i++) {
158                                 var teacher = Tearchers[i];
159                                 if (teacher) {
160                                     if (selfclik.find("img").attr("src") == teacher.imgsrc) {
161                                         $(".T1").html(teacher.T1);
162                                         $(".T2").html(teacher.T2);
163                                         $(".T3").html(teacher.T3);
164                                     }
165                                 }
166                             }
167                         }
168                     });
169                 });
170             },
171             //將第一個li插在最後一個ul以後
172             firstInsertAfterLast: function () {
173                 $("ul li:first").insertAfter($("ul li:last"));
174             },
175             /*
176                 得到高亮顯示的li
177                 $containerObject：ul容器jquery對象
178                 $result：高亮顯示的li
179               */
180             getHightLightLi: function (options) {
181                 var $lis = $("ul li", options.scrollContainer);
182                 var $result = null;
183                 $lis.each(function (index, element) {
184                     if ($(this).attr("class") == "Zzhao_cent") {
185                         $result = $(element);
186                         $.each(Tearchers, function (index) {
187                             //當前對象
188                             var teacher = this;
189                             if ($result.find("img").attr("src") == teacher.imgsrc) {
190                                 index = index + 1;
191                                 //對最後一張圖片的處理
192                                 if (index >= (Tearchers.length - 1)) {
193                                     teacher = Tearchers[0];
194                                 } else {
195                                     teacher = Tearchers[index];
196                                 }
197                                 $(".T1").html(teacher.T1);
198                                 $(".T2").html(teacher.T2);
199                                 $(".T3").html(teacher.T3);
200                             }
201                         })
202                     }
203                 });
204                 return $result;
205             }
206         };
207         $(function () {
208             //初始化滾動對象
209             srcollImages.init({ "scrollContainer": $(".Teac") ,interval: 2000 });
210         });
211 
212     </script>
213 </head>
214 
215 <body>
216     <div class="teacher">
217         <div class="Teac">
218             <ul>
219                 <li class="Zzhao">
220                     <a href="#"><img src="imges/teach_1.png" /></a>
221                 </li>
222                 <li class="Zzhao">
223                     <a href="#"><img src="imges/teach_2.png" /></a>
224                 </li>
225                 <li class="Zzhao">
226                     <a href="#"><img src="imges/teach_3.png" /></a>
227                 </li>
228                 <li class="Zzhao">
229                     <a href="#"><img src="imges/teach_4.png" /></a>
230                 </li>
231                 <li class="Zzhao_cent">
232                     <a href="#"><img src="imges/teach_5.png" /></a>
233                 </li>
234                 <li class="Zzhao">
235                     <a href="#"><img src="imges/teach_6.png" /></a>
236                 </li>
237                 <li class="Zzhao">
238                     <a href="#"><img src="imges/teach_7.png" /></a>
239                 </li>
240                 <li class="Zzhao">
241                     <a href="#"><img src="imges/teach_8.png" /></a>
242                 </li>
243                 <li class="Zzhao">
244                     <a href="#"><img src="imges/teach_9.png" /></a>
245                 </li>
246             </ul>
247             <div class="Jjie">
248                 <span class="T1">萌萌雨5</span>
249                 <span class="T2">上海復旦大學碩士學位5</span></br>
250                 <p class="T3">
251                     追求完美與一身的現代化教師女性，才華橫溢
252                     一表人才，優秀教師5
253                 </p>
254             </div>
255         </div>
256     </div>
257 </body>
258 </html>

Index.html

總結

天天逛博客園已是一種習慣，的確收穫很多，看到了而後就動手實踐，也就有了這篇js重構的文章，雖然看起來仍有點亂，可是經過此次重構，讓我對jquery的擴展方法的用法有了一個深刻的學習。但若是將這個功能插件化，還得進一步深刻學習，而後再次重構，經過此次重構，收穫仍是有的，我會在之後的項目中更多的採用面向對象的方式去寫js或者jquery，也會將extend方法使用起來。