最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 沐浴春风 2016-02-19 19:12浏览(1605)

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

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

cycle.js演示各种特效的幻灯片循环插件
分类:图片代码 > 广告 难易:高级
查看演示 下载资源 下载积分: 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 
};
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/781.html
评论1
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 沙发
    10-10 08:05
    ngu137
    厉害了 word的哥。。。、。、
1 2