cycle.js演示各种特效的幻灯片循环插件

cycle.js是一个功能非常强大的幻灯片插件，支持创建一个标题,显示幻灯片个数图像计数；使用元数据,如一个“alt”属性,能够显示标题；图像淡入淡出；使用外部控制推进到一个特定的幻灯片播放水平滚动

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线充值

分类：图片代码 > 广告难易：高级

查看演示

加我微信，拉你进VIP群学习：

下载资源下载积分： 30 积分

引入循环插件cycle.js和动画插件easing.js

<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

演示一：shuffle 洗牌

<div id="shuffle" class="pics">
    <img src="http://www.erdangjiade.com/jquery/5/556/demo/images/1.jpg" width="200" height="200" />
    <img src="http://www.erdangjiade.com/jquery/5/556/demo/images/2.jpg" width="200" height="200" />
    <img src="http://www.erdangjiade.com/jquery/5/556/demo/images/3.jpg" width="200" height="200" />
</div>

$('#shuffle').cycle({
    fx: 'shuffle',
    easing: 'easeOutBack',
    delay: -4000
});

演示二：zoom放大

$('#zoom').cycle({
    fx: 'zoom',
    sync: false,
    delay: -2000
});

演示三：fade淡入淡出（默认）

$('#fade').cycle();

演示四：turndown 可翻下的

$('#slide').cycle({
    fx: 'turnDown',
    delay: -4000
});

演示四：curtainX 拉开窗帘

$('#up').cycle({
    fx: 'curtainX',
    sync: false,
    delay: -2000
});

颜色五：scrollRight向右滚动+easing动画

$('#right').cycle({
    fx: 'scrollRight',
    next: '#right',
    timeout: 0,
    easing: 'easeInOutBack'
});

cycle.js相关API参数

$.fn.cycle.defaults = {
    fx: 'fade', // name of transition effect (or comma separated names, ex: 'fade,scrollUp,shuffle')
    timeout: 4000, // milliseconds between slide transitions (0 to disable auto advance)
    timeoutFn: null, // callback for determining per-slide timeout value:  function(currSlideElement, nextSlideElement, options, forwardFlag)
    continuous: 0, // true to start next transition immediately after current one completes
    speed: 1000, // speed of the transition (any valid fx speed value)
    speedIn: null, // speed of the 'in' transition
    speedOut: null, // speed of the 'out' transition
    next: null, // selector for element to use as event trigger for next slide
    prev: null, // selector for element to use as event trigger for previous slide
//	prevNextClick: null,  // @deprecated; please use onPrevNextEvent instead
    onPrevNextEvent: null, // callback fn for prev/next events: function(isNext, zeroBasedSlideIndex, slideElement)
    prevNextEvent: 'click.cycle', // event which drives the manual transition to the previous or next slide
    pager: null, // selector for element to use as pager container
    //pagerClick   null,  // @deprecated; please use onPagerEvent instead
    onPagerEvent: null, // callback fn for pager events: function(zeroBasedSlideIndex, slideElement)
    pagerEvent: 'click.cycle', // name of event which drives the pager navigation
    allowPagerClickBubble: false, // allows or prevents click event on pager anchors from bubbling
    pagerAnchorBuilder: null, // callback fn for building anchor links:  function(index, DOMelement)
    before: null, // transition callback (scope set to element to be shown):	 function(currSlideElement, nextSlideElement, options, forwardFlag)
    after: null, // transition callback (scope set to element that was shown):  function(currSlideElement, nextSlideElement, options, forwardFlag)
    end: null, // callback invoked when the slideshow terminates (use with autostop or nowrap options): function(options)
    easing: null, // easing method for both in and out transitions
    easeIn: null, // easing for "in" transition
    easeOut: null, // easing for "out" transition
    shuffle: null, // coords for shuffle animation, ex: { top:15, left: 200 }
    animIn: null, // properties that define how the slide animates in
    animOut: null, // properties that define how the slide animates out
    cssBefore: null, // properties that define the initial state of the slide before transitioning in
    cssAfter: null, // properties that defined the state of the slide after transitioning out
    fxFn: null, // function used to control the transition: function(currSlideElement, nextSlideElement, options, afterCalback, forwardFlag)
    height: 'auto', // container height
    startingSlide: 0, // zero-based index of the first slide to be displayed
    sync: 1, // true if in/out transitions should occur simultaneously
    random: 0, // true for random, false for sequence (not applicable to shuffle fx)
    fit: 0, // force slides to fit container
    containerResize: 1, // resize container to fit largest slide
    pause: 0, // true to enable "pause on hover"
    pauseOnPagerHover: 0, // true to pause when hovering over pager link
    autostop: 0, // true to end slideshow after X transitions (where X == slide count)
    autostopCount: 0, // number of transitions (optionally used with autostop to define X)
    delay: 0, // additional delay (in ms) for first transition (hint: can be negative)
    slideExpr: null, // expression for selecting slides (if something other than all children is required)
    cleartype: !$.support.opacity, // true if clearType corrections should be applied (for IE)
    cleartypeNoBg: false, // set to true to disable extra cleartype fixing (leave false to force background color setting on slides)
    nowrap: 0, // true to prevent slideshow from wrapping
    fastOnEvent: 0, // force fast transitions when triggered manually (via pager or prev/next); value == time in ms
    randomizeEffects: 1, // valid when multiple effects are used; true to make the effect sequence random
    rev: 0, // causes animations to transition in reverse
    manualTrump: true, // causes manual transition to stop an active transition instead of being ignored
    requeueOnImageNotLoaded: true, // requeue the slideshow if any image slides are not yet loaded
    requeueTimeout: 250, // ms delay for requeue
    activePagerClass: 'activeSlide', // class name used for the active pager link
    updateActivePagerLink: null, // callback fn invoked to update the active pager link (adds/removes activePagerClass style)
    backwards: false  // true to start slideshow at last slide and move backwards through the stack
};

cycle.js演示各种特效的幻灯片循环插件 收藏