jQuery cycle2 輪播廣告設計

Cycle2是一個超棒的jQuery幻燈插件，提供了非常好的功能來幫助大家更簡單的使用插件的幻燈功能。支持聲明式的初始樣式配置，並且無須腳本可以完全支持自定義。你只需要簡單的包含插件腳本，定義你的HTML內容，然後Cycle2可以幫助你完成其它所有的功能。

使用說明

函數可讓指定的 jQuery 物件的所有子元素產生輪播，並可加入多種動畫變換效果。也可以簡單地只運用修改 HTML 屬性，而不用撰寫額外的 script 就可以產生輪播。

載入 jQuery library 及 plugin (下載 script 檔)

jQuery library (需要 1.7 以後版本)
cycle2 plugin (英文)

<script src="jquery.js"></script>
<script src="jquery.cycle2.js"></script>

1 2	<script src="jquery.js"></script> <script src="jquery.cycle2.js"></script>

cycle 基本用法

<div class="jqCycle">
	<ul>
		<li><a href="news1.html"><img src="pic1.png" alt="new1" /></a></li>
		<li><a href="news2.html"><img src="pic2.png" alt="new2" /></a></li>
		<li><a href="news3.html"><img src="pic3.png" alt="new3" /></a></li>
		<li><a href="news4.html"><img src="pic4.png" alt="new4" /></a></li>
	</ul>
</div>

<ul>

</ul>

</div>

$('*.jqCycle>ul').cycle({slides:">li"});
//ul 元素的所有子元素 li ，以原先定義的效果 (淡出淡入) 依序輪播。

1 2	$('*.jqCycle>ul').cycle({slides:">li"}); //ul 元素的所有子元素 li ，以原先定義的效果 (淡出淡入) 依序輪播。

<ul class="cycle-slideshow" data-cycle-slides=">li">
<!-- 
增加 html 屬性方式的片段 (不用撰寫額外的 script) 
不需撰寫 script ，即會自動輪播 *.cycle-slideshow 的所有 li 子元素。
-->

<!--

增加 html 屬性方式的片段 (不用撰寫額外的 script)

不需撰寫 script ，即會自動輪播 *.cycle-slideshow 的所有 li 子元素。

-->

jQuery 指定物件及函數使用可參閱 jQuery 基本用法。

cycle 函數的參數

點這官網說明

使用 Javascript Object (JSON) 作為參數。參數的屬性亦可指定在輪播容納區的 html data-cycle-* 屬性
有加 ♦ 符號者，表示屬性可指定在個別輪播元素。

slides

指定輪播片元素，可以是「jQuery 物件」、「jQuery selector 文字串」；
原定值為 >img 。

$('*.jqCycle>ul').cycle({slides:">li"});

1	$('*.jqCycle>ul').cycle({slides:">li"});

fx

指定輪播變換效果

以文字名稱表示；原定值為 fade，共有 fade fadeOut scrollHorz none 。
更多效果以 cycle2 Transition plugin 方式加入。

$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz"});

1	$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz"});

亦可指定在個別輪播元素的 data-* 屬性

<li data-cycle-fx="fadeOut">

1	<li data-cycle-fx="fadeOut">

speed

指定效果的變換速度，單位為 ms ；原定值為 500 。

$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250});

1	$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250});

timeout

指定兩個輪播之間的間隔時間，單位為 ms ；原定值為 4000 ，指定 0 表示停止自動輪播。

$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,timeout:3000});

1	$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,timeout:3000});

delay

指定延遲首次變換的開始時間，單位為 ms ；原定值為 0 ；可為負值，表示提前。

$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,timeout:3000,delay:2000});

1	$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,timeout:3000,delay:2000});

pause-on-hover (pauseOnHover)

指定鼠標移入輪播元素時是否暫停變換時間；原定值為 false ，不會暫停；也可為「jQuery selector 文字串」，指定附加此 hover 事件的元素。

$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,timeout:3000,pauseOnHover:true});

1	$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,timeout:3000,pauseOnHover:true});

random

指定輪播元素播放順序是否隨機；原定值為 false ，依 DOM 的順序播放。

$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,timeout:3000,random:true});

1	$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,timeout:3000,random:true});

sync

指定變換時是否出與進同步 (出與進同時變換) ；原定值為 true ，出與進同步，反之則先出後進。

$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,sync:false});

1	$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,sync:false});

starting-slide (startingSlide)

指定輪播首檔出現的元素代號，以零起始 (zero-based) 索引整數表示；原定值為 0 ，由第一個元素開始。

$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,startingSlide:2});

1	$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,startingSlide:2});

指定當作跳至下一元素的按鈕，可以是「jQuery 物件」、「jQuery selector 文字串」；原定值為 > .cycle-next

$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,next:"button#nx"});

1	$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,next:"button#nx"});

指定當作跳至上一元素的按鈕，可以是「jQuery 物件」、「jQuery selector 文字串」；原定值為 .cycle-prev

$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,prev:"button#pv"});

1	$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,prev:"button#pv"});

easing

指定非等速動畫函數名稱 (需要導入 easing plugin)；原定值為 null 。

$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,easing:'easeInOutQuad'});

1	$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,easing:'easeInOutQuad'});

pager

指定縮圖列的容納區物件，可以是「jQuery 物件」、「jQuery selector 文字串」；原定值為 > .cycle-pager

$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,pager:'*.cycleNavbar'});

1	$(".jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,pager:'.cycleNavbar'});

pager-template (pagerTemplate)

指定作為縮圖列個別按鈕的元素，以「html 文字串」表示，會成為 pager 屬性指定的物件的子元素；原定值為 <span>•</span> ；如果已經有這些元素，以 '' (空字) 表示不再自動加入。

$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,pager:$('*.cycleNavbar'),pagerTemplate:''});

1	$(".jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,pager:$('.cycleNavbar'),pagerTemplate:''});

pager-event (pagerEvent)

指定附加在縮圖列個別按鈕的事件名稱 (型式) ；原定值為 click.cycle。

$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,pager:$('*.cycleNavbar'),pagerTemplate:'',pagerEvent:'click.cycle focus.cycle'});

1	$(".jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,pager:$('.cycleNavbar'),pagerTemplate:'',pagerEvent:'click.cycle focus.cycle'});

caption

指定輪播片標註的容器元素，可以是「jQuery 物件」、「jQuery selector 文字串」；原定值為 > .cycle-caption 。

$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,caption:'*.slideTitle'});

1	$(".jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,caption:'.slideTitle'});

caption-template (captionTemplate)

指定輪播片標註的内容範本；原定值為 {{slideNum}} / {{slideCount}} ；
{{slideNum}} 表示輪播片編號， {{slideCount}} 表示輪播片總數。

$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,caption:'*.slideTitle',captionTemplate:'共 {{slideCount}} 則'});

1	$(".jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,caption:'.slideTitle',captionTemplate:'共 {{slideCount}} 則'});

overlay

指定輪播片標註的容器元素，可以是「jQuery 物件」、「jQuery selector 文字串」；原定值為 '> .cycle-overlay' 。

$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,overlay:'*.slideNote'});

1	$(".jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,overlay:'.slideNote'});

overlay-template (overlayTemplate)

指定輪播片標註的内容範本；原定值為 <div>{{title}}</div><div>{{desc}}</div>；
{{title}} 表示輪播元素 data-cycle-title 屬性的内容，
{{desc}} 表示輪播元素 data-cycle-desc 屬性的内容

$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,overlayTemplate:'<div>{{title}}</div>'});

1	$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,overlayTemplate:'<div>{{title}}</div>'});

loop

指定輪播循環次數；原定值為 0 ；小於 1 表示無限次。

$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,loop:1});

1	$("*.jqCycle>ul").cycle({slides:">li",fx:"scrollHorz",speed:250,loop:1});

製作 RWD 網頁開發時使用 Cycle 2/3 Plugin img 所發生的問題

原先使用舊版本，但發現 <img> 無法在 Bootstrap 中的 rwd 中自動縮放，主要原因是所有的 <img> 中的定位 position: absolute; 這樣的話在百分比的框架中就會感應不到子元件的高和寬了，因此找了其他方法想改善。

後來看到新版本的 demo，查看 <img> 中第一張的圖片為 position: static; 這部份 RWD 就可以感應到高寬了，其他後面 <img> 都為 position: absolute;，但這沒關係，主要是控制透明度 opacity: 還有其他出現的時間點，其原理也是層疊上去的。

舊版本的製作方法

加入圖片檔

<div id="slideshow">  
    <img src="img1.png" />  
    <img src="img2.png" />  
    <img src="img3.png" />  
</div>

</div>

調整 CSS

這部份我跳過，主要是 <img> 是 max-width: 100%，只要控制好上層父系的高or寬就可以了。

#slideshow   
{    
    top: 0px;   
    left: 0px;    
    float: left;    
    width: 200px;    
    height: 10px;  
    z-index: -5;   
}

#slideshow

{

top: 0px;

left: 0px;

float: left;

width: 200px;

height: 10px;

z-index: -5;

}

加入 Script

<script src="../jquery.cycle.all.js" type="text/javascript"></script>  
<script type="text/javascript">  
    $(document).ready(function () {   
         $('#slideshow').cycle({    
             fx: "scrollHorz"   
         });   
    });  
</script>

$(document).ready(function () {

$('#slideshow').cycle({

fx: "scrollHorz"

});

</script>

fx 參數是切換的效果，如果不用太多炫麗的效果，
只要載入 lite 檔就夠了畢竟 cycle.all.js 檔會比較肥大，
切換效果參數的設定可以至此頁面參考，
加入分頁切換功能

加入個div，設定幾個參數就可以完成

<div id="slideshow">  
    <div id="nav1"></div>  
    <img src="img1.png" />  
    <img src="img2.png" />  
    <img src="img3.png" />  
</div>

</div>

$(document).ready(function () {   
    $('#slideshow').cycle({   
         fx: "scrollHorz",   
         speed: 'fast',   
           timeout: 3000,    
           pager: '#nav',   
           slideexpr: 'img'  
      });   
});

$(document).ready(function () {

$('#slideshow').cycle({

fx: "scrollHorz",

speed: 'fast',

timeout: 3000,

pager: '#nav',

slideexpr: 'img'

});

$(document).ready(function () {   
    $('#slideshow').cycle({   
         fx: "scrollHorz",   
         speed: 'fast',   
           timeout: 3000,    
           pager: '#nav',   
           slideexpr: 'img',   
        before: function (currslideelement, nextslideelement, options, forwardflag) {  
              //抓到目前圖片的index    
              $('#txt_index').val($(nextslideelement).index());  
            // do something .....    
        }    
      });   
});

$(document).ready(function () {

$('#slideshow').cycle({

fx: "scrollHorz",

speed: 'fast',

timeout: 3000,

pager: '#nav',

slideexpr: 'img',

before: function (currslideelement, nextslideelement, options, forwardflag) {

//抓到目前圖片的index

$('#txt_index').val($(nextslideelement).index());

// do something .....

}

});

新版更新

<script src="../jquery.cycle.all.js" type="text/javascript"></script>  
// 修改下面
<script src="assets/js/jquery.cycle2.min.js"></script>

// 修改下面

基本上設定都 ok，不過新版好像有更多效果，也可以製成 slideshow banner

參考資料來源
(舊版本無rwd)
http://jquery.malsup.com/cycle/
參數
http://ithelp.ithome.com.tw/question/10128503
(新版本rwd可用)
http://jquery.malsup.com/cycle2/
解說：
http://ithelp.ithome.com.tw/question/10128503

資料來源

jQuery Cycle2 輪播廣告範例展演 [5*]
Cycle 2 plugin 使用方法可參考教學及基本解説

標籤雲

文章段落

jQuery cycle2 輪播廣告設計

使用說明

載入 jQuery library 及 plugin (下載 script 檔)

cycle 函數的參數

slides

fx

指定輪播變換效果

亦可指定在個別輪播元素的 data-* 屬性

speed

timeout

delay

pause-on-hover (pauseOnHover)

random

sync

starting-slide (startingSlide)

next

prev

easing

pager

pager-template (pagerTemplate)

pager-event (pagerEvent)

caption

caption-template (captionTemplate)

overlay

overlay-template (overlayTemplate)

loop

製作 RWD 網頁開發時使用 Cycle 2/3 Plugin img 所發生的問題

舊版本的製作方法

加入圖片檔

調整 CSS

加入 Script

新版更新

資料來源

標籤雲

#ezw_tco-2 .ez-toc-title{ font-size: 120%; ; ; } #ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active{ background-color: #ededed; } 文章段落

使用說明

載入 jQuery library 及 plugin (下載 script 檔)

cycle 函數的參數

slides

fx

指定輪播變換效果

亦可指定在個別輪播元素的 data-* 屬性

speed

timeout

delay

pause-on-hover (pauseOnHover)

random

sync

starting-slide (startingSlide)

next

prev

easing

pager

pager-template (pagerTemplate)

pager-event (pagerEvent)

caption

caption-template (captionTemplate)

overlay

overlay-template (overlayTemplate)

loop

製作 RWD 網頁開發時使用 Cycle 2/3 Plugin img 所發生的問題

舊版本的製作方法

加入圖片檔

調整 CSS

加入 Script

新版更新

資料來源

文章段落