29二月/121

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

前言

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

實作

切換的元素

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

<div class="slideshow">
    <img src="https://lh3.googleusercontent.com/-U6vCf5oDZAw/T05BUWSLnpI/AAAAAAAAFWU/_e1v0kB4Vaw/s256/01.png" />
    <img src="https://lh6.googleusercontent.com/-wha03pCigY8/T05BUakSYZI/AAAAAAAAFWY/ePP913sb7es/s256/02.png" />
    <img src="https://lh6.googleusercontent.com/-69LFPoQK53k/T05BUdGybPI/AAAAAAAAFWQ/9QyWvkDZP2g/s256/03.png" />
    <img src="https://lh6.googleusercontent.com/-hZznT6lfH7g/T05BVNBrL9I/AAAAAAAAFWw/9TCpHVsYAAY/s256/04.png" />
    <img src="https://lh6.googleusercontent.com/-OVYyBLK1nVk/T05BVQfuyLI/AAAAAAAAFWg/2RstgJXqGJ0/s256/05.png" />
    <img src="https://lh3.googleusercontent.com/-drgsbAPfYqE/T05BV995PSI/AAAAAAAAFWo/TQ-OvjH7-0Q/s256/06.png" />
    <img src="https://lh3.googleusercontent.com/-8lDVZvbYjsw/T05BWIvU1QI/AAAAAAAAFWs/jKubLb0Qym8/s256/07.png" />
    <img src="https://lh6.googleusercontent.com/-r4IeqS0rVpo/T05BWeoijiI/AAAAAAAAFW4/RVmq9AYkDbM/s256/08.png" />
    <div id="pager">
    </div>
</div>

</div>

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

分頁 CSS

#pager
{
    z-index: 200;
    position: absolute;
    bottom: 20px;
    right: 20px;
    opacity: .70;
    filter: Alpha(Opacity=70);
    _filter: alpha(opacity=70); /*IE6*/
    -moz-opacity: 0.7; /*fireFox*/
}
#pager a
{
    padding: 3px 7px;
    background: #000;
    color: Gray;
    text-decoration: none;
}
#pager a.activeSlide
{
    color: #fff;
    background: #000;
}
#pager a:focus
{
    outline: none;
}

#pager

{

z-index: 200;

position: absolute;

bottom: 20px;

right: 20px;

opacity: .70;

filter: Alpha(Opacity=70);

_filter: alpha(opacity=70); /*IE6*/

-moz-opacity: 0.7; /*fireFox*/

}

#pager a

{

padding: 3px 7px;

background: #000;

color: Gray;

text-decoration: none;

}

#pager a.activeSlide

{

color: #fff;

background: #000;

}

#pager a:focus

{

outline: none;

}

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

程式部分

$(document).ready(function () {
	$(".slideshow").cycle({
		fx: &#039;fade&#039;, // 切換特效
		pager: &#039;#pager&#039;,    // 分頁
		slideExpr: &#039;img&#039;,   // 要做切換的元素
		speed: 2000,    // 元素間切換速度
		timeout: 5000,  // 每個元素間隔時間
		pause: true,  // 滑鼠移到上頭自動停止播放
		pagerAnchorBuilder: function (idx, slide) {     // 自訂 pager 產生器
			return &#039;<a href="#">&#039;+ (idx + 1) +&#039;</a>&#039;;
		}
	});
});

$(document).ready(function () {

$(".slideshow").cycle({

fx: 'fade', // 切換特效

pager: '#pager', // 分頁

slideExpr: 'img', // 要做切換的元素

speed: 2000, // 元素間切換速度

timeout: 5000, // 每個元素間隔時間

pause: true, // 滑鼠移到上頭自動停止播放

pagerAnchorBuilder: function (idx, slide) { // 自訂 pager 產生器

return '<a href="#">'+ (idx + 1) +'</a>';

}

});

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

$(".slideshow").cycle({ fx: &#039;fade&#039; });

1	$(".slideshow").cycle({ fx: 'fade' });

IE 修正樣式

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

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

經 Mason 提醒：會使得特效都失效，請確定需要在加上喔！

.slideshow img /* 修正 IE7 IE8 PNG 問題 */
{
    background: none !important;
    filter: none !important;
}

.slideshow img /* 修正 IE7 IE8 PNG 問題 */

{

background: none !important;

filter: none !important;

}

結論

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

參考資料

jQuery Cycle Plugin

Jquery Cycle Plugin and Png Transparency in IE8 and IE7

標籤： IE7, IE8, jQuery, jQuery Plugin 回覆此文章

回覆 (1) 引用 (0) ( 訂閱此篇文章的回覆 )

Mason
三月 1st, 2012 - 00:34

IE原本用濾鏡作切換圖片的 fadein 效果
加上後面那段CSS IE 7 8 就會直接換圖沒有效果了

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

( 回覆 )

文章彙整

文章分類

其他 (9)
未分類 (1)
程式開發技術 (7)
- C# (4)
- Linq (4)
網路程式設計 (20)
- ASP.Net (5)
- ASP.Net MVC (17)
- WCF (1)
網頁開發技術 (8)
- CSS (1)
- JavaScript (1)
- jQuery (4)
- Mobile Web (2)
開發相關軟體 (4)
- Internet Information Service (2)
- SQL Server (1)
- Visual Studio (1)

鏈結

網站資訊

授權聲明

姓名標示-非商業性-禁止改作 3.0
姓名標示 - 您必須保留原作姓名標示
非商業性 - 您不得為商業使用本著作
禁止改作 - 您不得改變或改作本著作

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