Coding 之路,不由分說 .Net,MVC,jQuery

29二月/121

【JQPlugin】jQuery Cycle - 好用的幻燈片展示外掛

Google PageRank查詢

前言

jQuery Cycle 是我很喜歡用的一個幻燈片效果的外掛,可以很方便產生圖片切換的效果,而且內建也有很多的切換效果,今天就簡單介紹一下用法,也順便提供一個今天同事遇到在 IE7 使用 PNG 會沒有透明背景的解決辦法。

實作

切換的元素

首先先準備要做圖片切換的 HTML(圖片來源

其中 div pager 是為了之後可以有分頁的按鈕呈現的地方。

分頁 CSS

這邊是基本的範例,可以根據自己的需求去調整位置囉!

程式部分

這邊是我比較常用的參數,以及產生 Pager 的自訂語法。如果想要最簡單產生的方式,可以用下面的語法就好囉!

IE 修正樣式

今天同事在使用的時候發現在 IE7 部分 PNG 透明效果會失效,會變成醜醜的白色。

有找到下列的 CSS 可以修正。如果有遇到此問題的朋友可以嘗試看看囉!

經 Mason 提醒:會使得特效都失效,請確定需要在加上喔!

結論

這一個外掛真的是很好用,還有許多參數可以設定,應該可以完成大部分人的需求,就看大家的需求自己去修改囉!

參考資料

jQuery Cycle Plugin

Jquery Cycle Plugin and Png Transparency in IE8 and IE7

 

回覆 (1) 引用 (0)
  1. IE原本用濾鏡作切換圖片的 fadein 效果
    加上後面那段CSS IE 7 8 就會直接換圖沒有效果了

    黯雲回應:
    看來整個都沒辦法有切換效果了...Orz


Leave a comment

目前沒有人引用這篇文章。