jquery.cycle.js簡單用法執行個體

標籤：style   class   blog   code   java   http   

樣式：

a{text-decoration: none;}*{margin:0; padding:0;}/*容器設定*/.player { width:216px; height:248px; background:url(http://i2.itc.cn/20120117/2cc0_da8f6c82_c8da_693d_7714_9533a013006a_3.jpg) no-repeat; background-color:#ede1d1; position:relative; padding:13px 0px 0px 12px;}.player ul{ width:198px; height:213px; border:solid 1px #ebe2d3; overflow:hidden;}.player li{ width:196px; height:211px;  border:solid 1px #b9a686; position:relative;}/*播放按鈕編號*/.number{ position:absolute; top:233px; left:147px; width:70px; height:18px;}.number a{display:block;position:absolute; width:15px; height:15px; background:url(http://i2.itc.cn/20120117/2cc0_da8f6c82_c8da_693d_7714_9533a013006a_14.jpg) no-repeat; position:absolute; font-size:12px; font-family:"宋體"; color:#732a0a; text-align:center; line-height:15px;}.number .active{ color:#fff;}.number .num1{top:0px; left:0px;}.number .num2{top:0px; left:16px;}.number .num3{top:0px; left:32px;}.number .num4{top:0px; left:48px;}

html:js檔案可以自己再網上下載。

<div class="player">  <ul>    <li><img src="http://i2.itc.cn/20120117/2cc0_da8f6c82_c8da_693d_7714_9533a013006a_16.jpg" width="196" height="211" title="十大超級軍團稱號" /></li>    <li><img src="http://i2.itc.cn/20120117/2cc0_da8f6c82_c8da_693d_7714_9533a013006a_17.jpg" width="196" height="211"title="萬元現金" /></li>    <li><img src="http://i2.itc.cn/20120117/2cc0_da8f6c82_c8da_693d_7714_9533a013006a_18.jpg" width="196" height="211" title="暢遊一卡通" /></li>    <li><img src="http://i2.itc.cn/20120117/2cc0_da8f6c82_c8da_693d_7714_9533a013006a_19.jpg"width="196" height="211" title="軍團特權值" /></li>  </ul>  <div class="number"></div></div><div>    <a href="javascript:void(0);" class="prev">上一個</a>    <a href="javascript:void(0);" class="next">下一個</a></div><script type="text/javascript" src="http://www1.changyou.com/scripts/jquery.min.js"></script> <script type="text/javascript" src="http://www1.changyou.com/scripts/jquery.cycle.all.min.js"></script> 

 

    $(‘.player ul‘).cycle({        fx: ‘fade‘,        timeout: 4000, // 投影片過渡間隔，單位是毫秒 (若值為0則不自動切換)        pause: 1 , // 過渡的速度        pager: ‘.number‘,// 按鈕容器元素        prev:‘.prev‘,        next:‘.next‘,        pagerEvent: ‘mouseover‘, // 按鈕驅動頁面導航的事件        cleartype: !$.support.opacity, // 若為true，則應用clearType修正 (專為IE提供)是否支援半透明效果        activePagerClass: ‘active‘, // 當按鈕連結被啟用時的css類名        pagerAnchorBuilder: function(idx, slide) {  // 用於建立按鈕超連結的回呼函數:// function(index, DOMelement)        idx += 1;        return ‘<a href="javascript:void(0)" class="num‘+idx+‘">‘　+ idx + ‘</a>‘;    }}); 

參數說明：

1.官網：http://jquery.malsup.com/cycle/
  demo: http://jquery.malsup.com/cycle/adv.html    
2.
fx參數設定過度效果
jquery.cycle.js現在暫時支援27種切換特效， 測試如下，以字母排序：

blindX:前圖向右滑動漸隱，後圖向左滑動漸顯
blindX:前圖向下滑動漸隱，後圖向上滑動漸顯
blindX:前圖向右下滑動漸隱，後圖向左上滑動漸顯
cover:前圖不動，後圖從右劃入覆蓋前圖
curtainX：圖片被分成左右兩段，前圖兩段向右滑動漸隱，後圖兩段向左滑動漸顯（酷！）
curtainY：圖片被分成上下兩段，前圖兩段向下滑動漸隱，後圖兩段向上滑動漸顯（酷！）
fade:前圖漸隱，同時後圖漸顯
fadeZoom：前圖漸隱，同時後圖由小變大覆蓋前圖
growX：前圖不動，後圖寬度從0增至100%,出發點：中間
growY：前圖不動，後圖高度從0增至100%，出發點：中間
scrollUp：同時向上滑動至後圖完全顯示
scrollLeft：同時向左滑動至後圖完全顯示
scrollRight：同時向右滑動至後圖完全顯示
scrollDown：同時向下滑動至後圖完全顯示
scrollHorz：同Left,但手動觸發時，如果觸發數字小於當前，則反向滾動
scrollVert：同Down,但手動觸發時，如果觸發數字小於當前，則反向滾動
shuffle：前圖向左下方飛出，然後飛入後圖背後（酷！）
slideX：前圖寬度由100減至0，後圖寬度由0增至100%（酷！）
slideY：前圖高度由100減至0，後圖高度由0增至100%
toss：前圖向右上方飛至消失
turnUp：前圖不動，後圖從底部向上滑入
turn



3. 參數如下：

// 重寫這個全域變數（每個都是可選的）
{
      fx: ‘fade‘, // 過渡效果的名字 (或者用逗號分開, 如: fade,scrollUp,shuffle)
      timeout: 4000, // 投影片過渡間隔，單位是毫秒 (若值為0則不自動切換)
      timeoutFn: null, // 每張投影片播放時間結束時的回呼函數 function(currSlideElement,       nextSlideElement, options, forwardFlag)
      continuous: 0, // 若為true，則當前投影片播放完後會直接播放下一張
      speed: 1000, // 過渡的速度
      speedIn: null, // 投影片開始時的過渡速度
      speedOut: null, // 投影片結束時的過渡速度
      next: null, // 下一張投影片的觸發元素
      prev: null, // 上一張投影片的觸發元素
      prevNextClick: null, // prev/next的單擊回呼函數: function(isNext, zeroBasedSlideIndex, slideElement)
      prevNextEvent: ‘click.<a title="cycle" href="http://www.mileke.com/archives/tag/cycle">cycle</a>‘,//用於手動驅動上/下一張過渡的事件
      pager: null, // 頁面容器元素
      pagerClick: null, // 頁面容器的單擊回呼函數: function(zeroBasedSlideIndex, slideElement)
      pagerEvent: ‘click.cycle‘, // 驅動頁面導航的事件
      allowPagerClickBubble: false, // 允許或阻止頁面單擊事件的向上傳遞
      pagerAnchorBuilder: null, // 用於建立超連結的回呼函數:// function(index, DOMelement)
      before: null, // 過渡回呼函數 (scope為將要顯示的元素): function(currSlideElement, nextSlideElement, options, forwardFlag)
      after: null, // 過渡回呼函數 (scope為已經顯示過的元素): function(currSlideElement, nextSlideElement, options, forwardFlag)
      end: null, // 當投影片終止時的回呼函數 (與‘autostop‘和‘nowrap‘選項聯用): function(options)
      easing: null, // 開始和結束過渡時的easing方法
      easeIn: null, // 開始過渡時的easing
      easeOut: null, // 結束過渡時的easing
      shuffle: null, // 對於shuffle動畫的座標, 比如: { top:15, left: 200 }
      animIn: null, // 投影片進入時的動畫屬性
      animOut: null, // 投影片結束時的動畫屬性
      cssBefore: null, // 投影片進入前的狀態屬性
      cssAfter: null, // 投影片結束後的狀態屬性
      fxFn: null, // 用於控制過渡的函數: function(currSlideElement, nextSlideElement, options, afterCalback, forwardFlag)
      height: ‘auto‘, // 容器高度
      startingSlide: 0, // 第一張要顯示的投影片在數組中的索引（基於0）
      sync: 1, // 若為true則進入/結束的過渡效果同時發生
      random: 0, // 若為true則全部隨機播放投影片，反之則按順序播放 (對shuffle動畫無效)
      fit: 0, // 強制投影片適應容器
      containerResize: 1, // 調整容器大小去適應最大的投影片
      pause: 0, // 若為true則啟用"pause on hover"（滑鼠滑過時暫停）功能
      pauseOnPagerHover: 0, // 若為true則當滑鼠滑過頁面時暫停
      autostop: 0, // 若為true則播放完‘autostopCount‘個投影片時自動停止
      autostopCount: 0, // 播放投影片個數
      delay: 0, // 第一張投影片的播放時延，可以為負，單位是毫秒
      slideExpr: null, // 選擇投影片的運算式
      cleartype: !$.support.opacity, // 若為true，則應用clearType修正 (專為IE提供)
      cleartypeNoBg: false, // 若為true，則禁用附加的clearType修正
      nowrap: 0, // 若為ture則防止投影片換行
      fastOnEvent: 0, // 當手動切換時快速過渡
      randomizeEffects:1, // 當指定了多個效果時有效，若為true，則這些效果將隨機出現
      rev: 0, // 若為true，則過渡效果反向播放
      manualTrump: true, // 若為true，則手動過渡會停止自動過渡
      requeueOnImageNotLoaded: true, // 如果某張圖片投影片尚未載入，則重新排入佇列
      requeueTimeout: 250, // 重新排隊的時延（ms）
      activePagerClass: ‘activeSlide‘, // 當頁面連結被啟用時的css類名
      updateActivePagerLink: null // 當頁面連結被啟用時的回呼函數(添加/刪除 activePagerClass 樣式)
};

文檔以及源碼下載：

jquery-cycle用法.rar