撰寫跑馬燈/廣告輪撥的好工具:jQuery Cycle Plugin

jQuery 是我最常用的 JavaScript Library,而且外掛程式超多,有空的人是可以多上去看看有什麼新玩意,保證有許多驚喜!我大約是在一年前得知有 jQuery Cycle Plugin 這個 jQuery 外掛套件吧,當時為了找一個可以「跨瀏覽器」的廣告輪撥套件找了好久,也試用了好幾套,不過大部分廣告輪撥或跑馬燈的 JavaScript Library 都不盡理想,最後才選擇用 jQuery Cycle Plugin 來做為跑馬燈/廣告輪撥的撰寫工具。

想看 jQuery Cycle Plugin 執行效果只要連上官網就可以看到了,至於如何使用那更是容易啦,先介紹一個簡單的範例:

假設有三張圖片你希望能依序輪流顯示:

<div class="pics"> 
    <img src="images/beach1.jpg" width="200" height="200" /> 
    <img src="images/beach2.jpg" width="200" height="200" /> 
    <img src="images/beach3.jpg" width="200" height="200" /> 
</div>

然後先定義這一區的 CSS

.pics {  
    height:  232px;  
    width:   232px;  
    padding: 0;  
    margin:  0;  
}
.pics img {  
    padding: 15px;  
    border:  1px solid #ccc;  
    background-color: #eee;  
    width:  200px; 
    height: 200px; 
    top:  0; 
    left: 0;
}

然後只要寫一行 JavaScript 就完成了整個廣告輪撥的工作:

$('#pics').cycle('fade');

若你想調整輪撥的速度(假設每 5 秒鐘換一張圖)

$('#pics').cycle({ 
    fx:    'fade', 
    speed:  5000 
 });

整體來說就是這個簡單,當然你也可以使用較複雜的效果或設定,完整的選項說明可以在這裡找到。

底下是官網上提供的示範與程式碼範例:

  

此文章由 will 發表於 2008/8/18 下午 03:01:08

永久連結 | 評論 (12) | 此文章的RSSRSS comment feed |

分類: CSS | JavaScript | Web

標籤:

收藏:

相關文章

評論

八月 18. 2008 17:04

motudo

剛好要用這方面的東西,謝謝你的分享,官網上提供的示範與程式碼連結
好像有異動,請確認看看。

http://malsup.com/jquery/cycle/

motudo

八月 18. 2008 17:20

will

感謝您的通知,我已經修正了。

will tw

八月 18. 2008 19:35

icools

用class的話這邊應該用 $('.pics').cycle('fade'); ?

icools tw

八月 19. 2008 09:44

will

是啊!

jQuery 的物件用法一模一樣,這只是個 plugin 而已,所以只有 cycle('fade') 的部分才是外掛進來的函數。

will tw

八月 19. 2008 12:23

Darkthread

推! 之前試了另一個jScroller,但整合時冒了些問題出來(導致Form Postback Request Validation Error,挺離奇的,沒細追),加上它的js Code有混過沒得Debug(雖然可以寫信去索取原始碼)。聽了保哥推薦,發現jQuery Cycle的結構單純清晰多了,雖然非原先預想的無段式向上捲動(我猜應該也是調得出來,但沒花功夫去試),但整合應用上簡單許多。

Darkthread tw

十月 31. 2008 15:18

季小風

請問~$('#pics').cycle('fade');這一段要放在那邊?
謝謝!

季小風 tw

十月 31. 2008 15:54

will

季小風,
要放在 script 標籤裡喔。如果你「完全不會」寫或也不會改 JavaScript 的話,使用 jQuery 應該也是有點吃力的。

will tw

十月 31. 2008 16:41

季小風

我試ㄉ沒錯~是放在script 標籤裡,但圖片不會動就是不會動~
直接顯示2張圖

季小風 tw

二月 28. 2009 19:31

卓小萍

大大請問一下
因為我的頁面有套MasterPage,
若是照上述的寫法我測試是ok的
but 我的圖片是動態抓取資料庫裡面的資料
所以假設我的<div id=MainBanner> 修正成 <div id=MainBanner runat="Server">
然後在CodebeHide用MainBanner.Controls.Add()
將我動態產出來的圖片塞進去
可是卻發現JQuery失效了....請問是什麼原因呢??

卓小萍 tw

二月 28. 2009 19:55

will

卓小萍,

因為 MasterPage 的關係,所以你的 div 的 id 被 ASP.NET 修改了,才會讓 jQuery 抓不到。

在 ASP.NET 中有所謂 NamingContainer (命名容器) 的觀念,MasterPage 就是一種 NamingContainer,所以放在 Content Page 中的控制項的 ID 都會被冠上「父親控制項」的名稱。

will tw

三月 2. 2009 22:50

卓小萍

so...原來...之前是有爬文去找過相關資訊
找到的結論大多是說會將原來的ID加工過...
只是我想說,難道真的一定要被冠上所謂的「父親控制項」名稱嗎?

卓小萍 tw

三月 3. 2009 09:23

will

是的,在 ASP.NET 4.0 之前是這樣的。
到了 ASP.NET 4.0 之後,你就可以自訂 ClientID 的名稱了!

will tw

新增評論


(將顯示您的Gravatar圖示)  

  Country flag

[b][/b] - [i][/i] - [u][/u]- [quote][/quote]



線上預覽

七月 5. 2009 06:45