也是用了很久的jQuery.

最近也在寫自己的那個(gè)小站。對(duì)于一些特效還是想弄清一原理。讓自己對(duì)一些東西有更深入的了解。

說說大圖輪播的原理：

1.很多時(shí)候使用方法Ul列表去展示。當(dāng)然這也有一些好處，比如float對(duì)齊之類的。當(dāng)然直接用p或者div也行。

2.了解overflow屬性。在溢出情況下的處理。其實(shí)輪播就是在不斷的處理li溢出的情況。

3 jQuery animate的動(dòng)畫效果。當(dāng)然如果不用這個(gè)也行。一個(gè)setInterval就能搞定它。不過jQuery還是做了一些封裝。

4 可能還需要一些基礎(chǔ)的理解就是對(duì)定位的熟悉。margin和postion的了解。

5 之后就是循環(huán)輪播了，循環(huán)輪播需要對(duì)節(jié)點(diǎn)進(jìn)行重新的修改。

   具體而言就是在輪播到最后一張圖片的時(shí)候，修改節(jié)點(diǎn)，將第一個(gè)節(jié)點(diǎn)，添加到列表的最后一個(gè)位置。如下：

[javascript] css({'margin-left':0}).children('li').last().after($(this).children('li').first());  

 

看一下核心代碼：

html:

 

[html] css:

 

 

[css] view plaincopy

 

1. .list{  
2.     width:538px;  
3.     height:198px;  
4.     overflow:hidden;  
5.     margin:50px auto;  
6. }  
7. .list ul{  
8.     width:2152px;  
9.     height:198px;  
10.     margin:0;  
11.     padding:0;  
12. }  
13. .list ul li{  
14.     float:left;  
15.     width:538px;  
16. }  

js:個(gè)人稍微封裝了一下：

 

 

[javascript] view plaincopy

 

1. (function($){  
2.     var silde = {  
3.         init:function(){  
4.             this.auto();  
5.         },  
6.         auto:function(){  
7.             var _root = this,  
8.                 $ul = $("#sidle").find("ul"),  
9.                 $lis = $ul.children("li"),  
10.                 width = $lis.eq(0).width();  
11.             setInterval(function(){  
12.                 $ul.animate({  
13.                         'margin-left':'-'+ width +'px'  
14.                     },  
15.                     'slow',  
16.                     function(){  
17.                         //此處保證能循環(huán)輪播  
18.                         //將已經(jīng)輪播過的節(jié)點(diǎn)的第一張圖片添加到末尾的位置  
19.                         //再將margin-left重置為0px;  
20.                         //這樣就能一直的循環(huán)下去.  
21.                         $ul.css({'margin-left':0}).  
22.                             children('li').  
23.                             last().  
24.                             after(  
25.                                 $ul.children('li').first()  
26.                             );  
27.                     });  
28.                 },2000  
29.             );  
30.         }  
31.     };  
32.     $(function(){silde.init();})  
33. })(jQuery);  

本文轉(zhuǎn)自http://blog.csdn.net/yangzhihello/article/details/19325805

相關(guān)文章

• win7 64位 IIS7 IIS7.5 無法連接Access數(shù)據(jù)庫的問題解決
• 基于jQuery的上下無縫滾動(dòng)應(yīng)用(單行或多行)
• htaccess轉(zhuǎn)換httpd.ini方法及案例參考
• 網(wǎng)站偽靜態(tài)的優(yōu)缺點(diǎn)
• 高質(zhì)量的外部鏈接從何而來？
• SEO不能忽視外鏈建設(shè)，更加要注重內(nèi)鏈建設(shè)
• 如何挑選合適的虛擬主機(jī)
• 網(wǎng)站建設(shè)的五個(gè)誤區(qū)
• php header 404跳轉(zhuǎn)錯(cuò)誤頁面的寫法
• 網(wǎng)頁嵌入百度地圖實(shí)例