jquery.cycle.js

jquery.cycle.js简单用法实例

样式：

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 样式)
};