Jquery插件—Cycle Plugin插件实现图片循环播放等

1、Jquery插件Cycle Plugin插件实现图片循环播放等图片展示效果的jQuery插件很多，都非常实用，我常用的就是jQuery Cycle Plugin。jQuery Cycle Plugin循环插件，不仅支持图片循环，而且支持任意元素的循环功能，效果非常丰富，可支持鼠标悬停暂停，自动停止，开始和结束事件调用等等，目前你所 看到的图片效果大部分都支持。需要自定义CSS样式，如：#ads height:200px; width:200px; overflow:hidden;#ads .ads li,#ads .ads li img width:960px; height:387px;使用

2、实例：一，包含文件部分自己在网上下载jquery插件和这个循环图片播放的插件： 二，HTML部分三，Javascript部分$(function()$(#ads .ads).cycle（fx : fade,timeout : 4000,pager : .num,pagerEvent : mouseover,pauseOnPagerHover : true,activePagerClass : current,pagerAnchorBuilder : function(idx, slide) idx += 1;return + ;）； )jQuery Cycle Plugin插件使用非常简单，如

3、上实例对ID为ads的DIV元素调用jQuery Cycle Plugin，这样就实现了一个图片循环展示的效果，jQuery Cycle Plugin可选效果非常多，如下：读者可以进入网址：/cycle/browser.html 看这些效果。blindX blindYblindZ cover curtainX curtainY fade fadeZoom growX growY scrollUp scrollDown scrollLeft scrollRight scrollHorz scrollVert shuffle slideX slideY

4、 toss turnUp turnDown turnLeft turnRight uncover wipe zoom 几个常用的使用方法一，自定义Cycle 循环展示效果$(#ads .ads).cycle( fx: scrollDown ); 其中fx表示需要使用的效果参数，如上：scrollDown二，自定义Cycle 循环展示的速度和延迟值$(#ads .ads).cycle( fx:fade, speed:2500 ); 其中speed表示显示的速度$(#ads .ads).cycle( fx:scrollDown, speed:300, timeout:2000 ); 其中timeo

5、ut表示显示下一张的延迟值三，其它应用$(#ads .ads).cycle( fx:fade, pause:1 );$(#ads .ads).cycle( fx: scrollDown, random:1 );在这儿附上插件cycle的代码（以及它的下载地址）如下：（jquery.cycle.js）可供读者下载复制改文档/* * jQuery Cycle Plugin (with Transition Definitions) * Examples and documentation at: /cycle/ * Copyright (c) 2007

6、-2010 M. Alsup * Version: 2.86 (05-APR-2010) * Dual licensed under the MIT and GPL licenses: * /licenses/mit-license.php * /licenses/gpl.html * Requires: jQuery v1.2.6 or later */(function($)var ver=2.86;if($.support=undefined)$.support=opacity:!($.browser.ms

7、ie);function debug(s)if($.fn.cycle.debug)log(s);function log()if(window.console&window.console.log)window.console.log(cycle +Atotype.join.call(arguments, );$.fn.cycle=function(options,arg2)var o=s:this.selector,c:this.context;if(this.length=0&options!=stop)if(!$.isReady&o.s)log(DOM not ready

8、, queuing slideshow);$(function()$(o.s,o.c).cycle(options,arg2););return this;log(terminating; zero elements found by selector+($.isReady?: (DOM not ready);return this;return this.each(function()var opts=handleArguments(this,options,arg2);if(opts=false)return;opts.updateActivePagerLink=opts.updateAc

9、tivePagerLink|$.fn.cycle.updateActivePagerLink;if(this.cycleTimeout)clearTimeout(this.cycleTimeout);this.cycleTimeout=this.cyclePause=0;var $cont=$(this);var $slides=opts.slideExpr?$(opts.slideExpr,this):$cont.children();var els=$slides.get();if(els.length2)log(terminating; too few slides: +els.leng

10、th);return;var opts2=buildOptions($cont,$slides,els,opts,o);if(opts2=false)return;var startTime=opts2.continuous?10:getTimeout(opts2.currSlide,opts2.nextSlide,opts2,!opts2.rev);if(startTime)startTime+=(opts2.delay|0);if(startTime10)startTime=10;debug(first timeout: +startTime);this.cycleTimeout=setT

11、imeout(function()go(els,opts2,0,!opts2.rev);,startTime););function handleArguments(cont,options,arg2)if(cont.cycleStop=undefined)cont.cycleStop=0;if(options=undefined|options=null)options=;if(options.constructor=String)switch(options)casedestroy:casestop:var opts=$(cont).data(cycle.opts);if(!opts)re

12、turn false;cont.cycleStop+;if(cont.cycleTimeout)clearTimeout(cont.cycleTimeout);cont.cycleTimeout=0;$(cont).removeData(cycle.opts);if(options=destroy)destroy(opts);return false;casetoggle:cont.cyclePause=(cont.cyclePause=1)?0:1;checkInstantResume(cont.cyclePause,arg2,cont);return false;casepause:con

13、t.cyclePause=1;return false;caseresume:cont.cyclePause=0;checkInstantResume(false,arg2,cont);return false;caseprev:casenext:var opts=$(cont).data(cycle.opts);if(!opts)log(options not found, prev/next ignored);return false;$.fn.cycleoptions(opts);return false;default:options=fx:options;return options

14、;elseif(options.constructor=Number)var num=options;options=$(cont).data(cycle.opts);if(!options)log(options not found, can not advance slide);return false;if(num=options.elements.length)log(invalid slide index: +num);return false;options.nextSlide=num;if(cont.cycleTimeout)clearTimeout(cont.cycleTime

15、out);cont.cycleTimeout=0;if(typeof arg2=string)options.oneTimeFx=arg2;go(options.elements,options,1,num=options.currSlide);return false;return options;function checkInstantResume(isPaused,arg2,cont)if(!isPaused&arg2=true)var options=$(cont).data(cycle.opts);if(!options)log(options not found, can not

16、 resume);return false;if(cont.cycleTimeout)clearTimeout(cont.cycleTimeout);cont.cycleTimeout=0;go(options.elements,options,1,1);function removeFilter(el,opts)if(!$.support.opacity&opts.cleartype&el.style.filter)tryel.style.removeAttribute(filter);catch(smother)function destroy(opts)if(opts.next)$(op

17、ts.next).unbind(opts.prevNextEvent);if(opts.prev)$(opts.prev).unbind(opts.prevNextEvent);if(opts.pager|opts.pagerAnchorBuilder)$.each(opts.pagerAnchors|,function()this.unbind().remove(););opts.pagerAnchors=null;if(opts.destroy)opts.destroy(opts);function buildOptions($cont,$slides,els,options,o)var

18、opts=$.extend(,$.fn.cycle.defaults,options|,$.metadata?$cont.metadata():$.meta?$cont.data():);if(opts.autostop)opts.countdown=opts.autostopCount|els.length;var cont=$cont0;$cont.data(cycle.opts,opts);opts.$cont=$cont;opts.stopCount=cont.cycleStop;opts.elements=els;opts.before=opts.before?opts.before

19、:;opts.after=opts.after?opts.after:;opts.after.unshift(function()opts.busy=0;);if(!$.support.opacity&opts.cleartype)opts.after.push(function()removeFilter(this,opts););if(opts.continuous)opts.after.push(function()go(els,opts,0,!opts.rev););saveOriginalOpts(opts);if(!$.support.opacity&opts.cleartype&

20、!opts.cleartypeNoBg)clearTypeFix($slides);if($cont.css(position)=static)$cont.css(position,relative);if(opts.width)$cont.width(opts.width);if(opts.height&opts.height!=auto)$cont.height(opts.height);if(opts.startingSlide)opts.startingSlide=parseInt(opts.startingSlide);if(opts.random)opts.randomMap=;f

21、or(var i=0;i=els.length)opts.startingSlide=0;opts.currSlide=opts.startingSlide|0;var first=opts.startingSlide;$slides.css(position:absolute,top:0,left:0).hide().each(function(i)var z=first?i=first?els.length-(i-first):first-i:els.length-i;$(this).css(z-index,z););$(elsfirst).css(opacity,1).show();re

22、moveFilter(elsfirst,opts);if(opts.fit&opts.width)$slides.width(opts.width);if(opts.fit&opts.height&opts.height!=auto)$slides.height(opts.height);var reshape=opts.containerResize&!$cont.innerHeight();if(reshape)var maxw=0,maxh=0;for(var j=0;jmaxw?w:maxw;maxh=hmaxh?h:maxh;if(maxw0&maxh0)$cont.css(widt

23、h:maxw+px,height:maxh+px);if(opts.pause)$cont.hover(function()this.cyclePause+;,function()this.cyclePause-;);if(supportMultiTransitions(opts)=false)return false;var requeue=false;options.requeueAttempts=options.requeueAttempts|0;$slides.each(function()var $el=$(this);this.cycleH=(opts.fit&opts.heigh

24、t)?opts.height:($el.height()|this.offsetHeight|this.height|$el.attr(height)|0);this.cycleW=(opts.fit&opts.width)?opts.width:($el.width()|this.offsetWidth|this.width|$el.attr(width)|0);if($el.is(img)var loadingIE=($.browser.msie&this.cycleW=28&this.cycleH=30&!plete);var loadingFF=($.browser.m

25、ozilla&this.cycleW=34&this.cycleH=19&!plete);var loadingOp=($.browser.opera&(this.cycleW=42&this.cycleH=19)|(this.cycleW=37&this.cycleH=17)&!plete);var loadingOther=(this.cycleH=0&this.cycleW=0&!plete);if(loadingIE|loadingFF|loadingOp|loadingOther)if(o.s&opts.requeueOnImageNo

26、tLoaded&+options.requeueAttempts100)log(options.requeueAttempts, - img slide not loaded, requeuing slideshow: ,this.src,this.cycleW,this.cycleH);setTimeout(function()$(o.s,o.c).cycle(options);,opts.requeueTimeout);requeue=true;return false;elselog(could not determine size of image: +this.src,this.cy

27、cleW,this.cycleH);return true;);if(requeue)return false;opts.cssBefore=opts.cssBefore|;opts.animIn=opts.animIn|;opts.animOut=opts.animOut|;$slides.not(:eq(+first+).css(opts.cssBefore);if(opts.cssFirst)$($slidesfirst).css(opts.cssFirst);if(opts.timeout)opts.timeout=parseInt(opts.timeout);if(opts.spee

28、d.constructor=String)opts.speed=$.fx.speedsopts.speed|parseInt(opts.speed);if(!opts.sync)opts.speed=opts.speed/2;var buffer=opts.fx=shuffle?500:250;while(opts.timeout-opts.speed)=(els.length-1)?0:opts.startingSlide+1;if(!opts.multiFx)var init=$.fn.cycle.transitionsopts.fx;if($.isFunction(init)init($

29、cont,$slides,opts);elseif(opts.fx!=custom&!opts.multiFx)log(unknown transition: +opts.fx,; slideshow terminating);return false;var e0=$slidesfirst;if(opts.before.length)opts.before0.apply(e0,e0,e0,opts,true);if(opts.after.length1)opts.after1.apply(e0,e0,e0,opts,true);if(opts.next)$(opts.next).bind(o

30、pts.prevNextEvent,function()return advance(opts,opts.rev?-1:1););if(opts.prev)$(opts.prev).bind(opts.prevNextEvent,function()return advance(opts,opts.rev?1:-1););if(opts.pager|opts.pagerAnchorBuilder)buildPager(els,opts);exposeAddSlide(opts,els);return opts;function saveOriginalOpts(opts)opts.origin

31、al=before:,after:;opts.original.cssBefore=$.extend(,opts.cssBefore);opts.original.cssAfter=$.extend(,opts.cssAfter);opts.original.animIn=$.extend(,opts.animIn);opts.original.animOut=$.extend(,opts.animOut);$.each(opts.before,function()opts.original.before.push(this););$.each(opts.after,function()opt

32、s.original.after.push(this););function supportMultiTransitions(opts)var i,tx,txs=$.fn.cycle.transitions;if(opts.fx.indexOf(,)0)opts.multiFx=true;opts.fxs=opts.fx.replace(/s*/g,).split(,);for(i=0;iopts.fxs.length;i+)var fx=opts.fxsi;tx=txsfx;if(!tx|!txs.hasOwnProperty(fx)|!$.isFunction(tx)log(discard

33、ing unknown transition: ,fx);opts.fxs.splice(i,1);i-;if(!opts.fxs.length)log(No valid transitions named; slideshow terminating.);return false;elseif(opts.fx=all)opts.multiFx=true;opts.fxs=;for(p in txs)tx=txsp;if(txs.hasOwnProperty(p)&$.isFunction(tx)opts.fxs.push(p);if(opts.multiFx&opts.randomizeEf

34、fects)var r1=Math.floor(Math.random()*20)+30;for(i=0;ir1;i+)var r2=Math.floor(Math.random()*opts.fxs.length);opts.fxs.push(opts.fxs.splice(r2,1)0);debug(randomized fx sequence: ,opts.fxs);return true;function exposeAddSlide(opts,els)opts.addSlide=function(newSlide,prepend)var $s=$(newSlide),s=$s0;if

35、(!opts.autostopCount)opts.countdown+;elsprepend?unshift:push(s);if(opts.els)opts.elsprepend?unshift:push(s);opts.slideCount=els.length;$s.css(position,absolute);$sprepend?prependTo:appendTo(opts.$cont);if(prepend)opts.currSlide+;opts.nextSlide+;if(!$.support.opacity&opts.cleartype&!opts.cleartypeNoB

36、g)clearTypeFix($s);if(opts.fit&opts.width)$s.width(opts.width);if(opts.fit&opts.height&opts.height!=auto)$slides.height(opts.height);s.cycleH=(opts.fit&opts.height)?opts.height:$s.height();s.cycleW=(opts.fit&opts.width)?opts.width:$s.width();$s.css(opts.cssBefore);if(opts.pager|opts.pagerAnchorBuild

37、er)$.fn.cycle.createPagerAnchor(els.length-1,s,$(opts.pager),els,opts);if($.isFunction(opts.onAddSlide)opts.onAddSlide($s);else$s.hide();$.fn.cycle.resetState=function(opts,fx)fx=fx|opts.fx;opts.before=;opts.after=;opts.cssBefore=$.extend(,opts.original.cssBefore);opts.cssAfter=$.extend(,opts.origin

38、al.cssAfter);opts.animIn=$.extend(,opts.original.animIn);opts.animOut=$.extend(,opts.original.animOut);opts.fxFn=null;$.each(opts.original.before,function()opts.before.push(this););$.each(opts.original.after,function()opts.after.push(this););var init=$.fn.cycle.transitionsfx;if($.isFunction(init)ini

39、t(opts.$cont,$(opts.elements),opts);function go(els,opts,manual,fwd)if(manual&opts.busy&opts.manualTrump)debug(manualTrump in go(), stopping active transition);$(els).stop(true,true);opts.busy=false;if(opts.busy)debug(transition active, ignoring new tx request);return;var p=opts.$cont0,curr=elsopts.

40、currSlide,next=elsopts.nextSlide;if(p.cycleStop!=opts.stopCount|p.cycleTimeout=0&!manual)return;if(!manual&!p.cyclePause&(opts.autostop&(-opts.countdown=0)|(opts.nowrap&!opts.random&opts.nextSlide=opts.fxs.length)opts.lastFx=0;fx=opts.fxsopts.lastFx;opts.currFx=fx;if(opts.oneTimeFx)fx=opts.oneTimeFx

41、;opts.oneTimeFx=null;$.fn.cycle.resetState(opts,fx);if(opts.before.length)$.each(opts.before,function(i,o)if(p.cycleStop!=opts.stopCount)return;o.apply(next,curr,next,opts,fwd););var after=function()$.each(opts.after,function(i,o)if(p.cycleStop!=opts.stopCount)return;o.apply(next,curr,next,opts,fwd)

42、;);debug(tx firing; currSlide: +opts.currSlide+; nextSlide: +opts.nextSlide);opts.busy=1;if(opts.fxFn)opts.fxFn(curr,next,opts,after,fwd,manual&opts.fastOnEvent);elseif($.isFunction($.fn.cycleopts.fx)$.fn.cycleopts.fx(curr,next,opts,after,fwd,manual&opts.fastOnEvent);else$.fn.cycle.custom(curr,next,

43、opts,after,fwd,manual&opts.fastOnEvent);if(changed|opts.nextSlide=opts.currSlide)opts.lastSlide=opts.currSlide;if(opts.random)opts.currSlide=opts.nextSlide;if(+opts.randomIndex=els.length)opts.randomIndex=0;opts.nextSlide=opts.randomMapopts.randomIndex;if(opts.nextSlide=opts.currSlide)opts.nextSlide

44、=(opts.currSlide=opts.slideCount-1)?0:opts.currSlide+1;elsevar roll=(opts.nextSlide+1)=els.length;opts.nextSlide=roll?0:opts.nextSlide+1;opts.currSlide=roll?els.length-1:opts.nextSlide-1;if(changed&opts.pager)opts.updateActivePagerLink(opts.pager,opts.currSlide,opts.activePagerClass);var ms=0;if(opt

45、s.timeout&!opts.continuous)ms=getTimeout(curr,next,opts,fwd);elseif(opts.continuous&p.cyclePause)ms=10;if(ms0)p.cycleTimeout=setTimeout(function()go(els,opts,0,!opts.rev);,ms);$.fn.cycle.updateActivePagerLink=function(pager,currSlide,clsName)$(pager).each(function()$(this).children().removeClass(cls

46、Name).eq(currSlide).addClass(clsName););function getTimeout(curr,next,opts,fwd)if(opts.timeoutFn)var t=opts.timeoutFn(curr,next,opts,fwd);while(t-opts.speed)250)t+=opts.speed;debug(calculated timeout: +t+; speed: +opts.speed);if(t!=false)return t;return opts.timeout;$.fn.cycle.next=function(opts)adv

47、ance(opts,opts.rev?-1:1);$.fn.cycle.prev=function(opts)advance(opts,opts.rev?1:-1);function advance(opts,val)var els=opts.elements;var p=opts.$cont0,timeout=p.cycleTimeout;if(timeout)clearTimeout(timeout);p.cycleTimeout=0;if(opts.random&val0)opts.randomIndex-;if(-opts.randomIndex=-2)opts.randomIndex

48、=els.length-2;elseif(opts.randomIndex=-1)opts.randomIndex=els.length-1;opts.nextSlide=opts.randomMapopts.randomIndex;elseif(opts.random)opts.nextSlide=opts.randomMapopts.randomIndex;elseopts.nextSlide=opts.currSlide+val;if(opts.nextSlide=els.length)if(opts.nowrap)return false;opts.nextSlide=0;var cb

49、=opts.onPrevNextEvent|opts.prevNextClick;if($.isFunction(cb)cb(val0,opts.nextSlide,elsopts.nextSlide);go(els,opts,1,val=0);return false;function buildPager(els,opts)var $p=$(opts.pager);$.each(els,function(i,o)$.fn.cycle.createPagerAnchor(i,o,$p,els,opts););opts.updateActivePagerLink(opts.pager,opts.startingSlide,opts.activePagerClass);$.fn.cycle.createPagerAnchor=function(i,el,$p,els,opts)var a;if($.isFunction(opts.pagerAnchorBuilder)a=opts.pagerAnchorBuilder(i,el);debug(pagerAnchorBuilder(+i+, el) returned: +a);elsea=+(i+1)+;if(!a)return;var $a=$