问鼎社区_成都问鼎科技官方论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 3794|回复: 0

[jquery插件] jquery cycle 图片切换插件

[复制链接]
发表于 2011-11-6 20:32:43 | 显示全部楼层 |阅读模式
演示地址:http://www.58wd.com/example/js/jquery_cycle.html

基于jquery功能非常强大的一款图片切换插件,当然也用用于文字区块。
插件地址:http://malsup.com/jquery/cycle/
使用案例地址:http://malsup.com/jquery/cycle/more.html?v2.23
使用代码示例:
  1. $('#slideshow').cycle({
  2.    fx: 'fade', // 过渡效果的名字 (或者用逗号分开, 如: fade,scrollUp,shuffle)
  3.    timeout: 4000, // 幻灯片过渡间隔,单位是毫秒 (若值为0则不自动切换)
  4.    timeoutFn: null, // 每张幻灯片播放时间结束时的回调函数:
  5.                     // function(currSlideElement, nextSlideElement, options, forwardFlag)
  6.    continuous: 0, // 若为true,则当前幻灯片播放完后会直接播放下一张
  7.    speed: 1000, // 过渡的速度
  8.    speedIn: null, // 幻灯片开始时的过渡速度
  9.    speedOut: null, // 幻灯片结束时的过渡速度
  10.    next: null, // 下一张幻灯片的触发元素
  11.    prev: null, // 上一张幻灯片的触发元素
  12.    prevNextClick: null, // prev/next的单击回调函数:
  13.                         // function(isNext, zeroBasedSlideIndex, slideElement)
  14.    prevNextEvent: 'click.cycle',//用于手动驱动上/下一张过渡的事件
  15.    pager: null, // 页面容器元素
  16.    pagerClick: null, // 页面容器的单击回调函数:
  17.                      // function(zeroBasedSlideIndex, slideElement)
  18.    pagerEvent: 'click.cycle', // 驱动页面导航的事件
  19.    allowPagerClickBubble: false, // 允许或阻止页面单击事件的向上传递
  20.    pagerAnchorBuilder: null, // 用于建立超链接的回调函数:
  21.                              // function(index, DOMelement)
  22.    before: null, // 过渡回调函数 (scope为将要显示的元素):
  23.                  // function(currSlideElement, nextSlideElement, options, forwardFlag)
  24.    after: null, // 过渡回调函数 (scope为已经显示过的元素):
  25.                 // function(currSlideElement, nextSlideElement, options, forwardFlag)
  26.    end: null, // 当幻灯片终止时的回调函数 (与'autostop'和'nowrap'选项联用):
  27.               // function(options)
  28.    easing: null, // 开始和结束过渡时的easing方法
  29.    easeIn: null, // 开始过渡时的easing
  30.    easeOut: null, // 结束过渡时的easing
  31.    shuffle: null, // 对于shuffle动画的坐标, 比如: { top:15, left: 200 }
  32.    animIn: null, // 幻灯片进入时的动画属性
  33.    animOut: null, // 幻灯片结束时的动画属性
  34.    cssBefore: null, // 幻灯片进入前的状态属性
  35.    cssAfter: null, // 幻灯片结束后的状态属性
  36.    fxFn: null, // 用于控制过渡的函数:
  37.    // function(currSlideElement, nextSlideElement, options, afterCalback, forwardFlag)
  38.    height: 'auto', // 容器高度
  39.    startingSlide: 0, // 第一张要显示的幻灯片在数组中的索引(基于0)
  40.    sync: 1, // 若为true则进入/结束的过渡效果同时发生
  41.    random: 0, // 若为true则随机播放幻灯片,反之则按顺序播放 (对shuffle动画无效)
  42.    fit: 0, // 强制幻灯片适应容器
  43.    containerResize: 1, // 调整容器大小去适应最大的幻灯片
  44.    pause: 0, // 若为true则启用"pause on hover"(鼠标滑过时暂停)功能
  45.    pauseOnPagerHover: 0, // 若为true则当鼠标滑过页面时暂停
  46.    autostop: 0, // 若为true则播放完'autostopCount'个幻灯片时自动停止
  47.    autostopCount: 0, // 播放幻灯片个数
  48.    delay: 0, // 第一张幻灯片的播放时延,可以为负,单位是毫秒
  49.    slideExpr: null, // 选择幻灯片的表达式
  50.    cleartype: !$.support.opacity, // 若为true,则应用clearType修正 (专为IE提供)
  51.    cleartypeNoBg: false, // 若为true,则禁用附加的clearType修正
  52.    nowrap: 0, // 若为ture则防止幻灯片换行
  53.    fastOnEvent: 0, // 当手动切换时快速过渡
  54.    randomizeEffects:1, // 当指定了多个效果时有效,若为true,则这些效果将随机出现
  55.    rev: 0, // 若为true,则过渡效果反向播放
  56.    manualTrump: true, // 若为true,则手动过渡会停止自动过渡
  57.    requeueOnImageNotLoaded: true, // 如果某张图片幻灯片尚未加载,则重新加入队列
  58.    requeueTimeout: 250, // 重新排队的时延(ms)
  59.    activePagerClass: 'activeSlide', // 当页面链接被激活时的css类名
  60.    updateActivePagerLink: null // 当页面链接被激活时的回调函数(添加/删除 activePagerClass 样式});
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|Archiver|手机版|问鼎社区  

GMT+8, 2020-4-9 11:58 , Processed in 0.154821 second(s), 27 queries .

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表