jquery实现图片翻转特效

效果图：CSS：html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,d el,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,tabl e,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }:focus { outline:0; }a:active { outline:none; }body { line-height:1; color:black; background:white; }ol,ul { list-style:none; }table { border-collapse:separate; border-spacing:0; }caption,th,td { text-align:left; font-weight:normal; }blockquote:before,blockquote:after,q:before,q:after { content:""; }blockquote,q { quotes:""""; }body {font:normal62.5%/1.5Helvetica,Arial,sans-serif;letter-spacing:0;color:#434343;background:#efefef url(../img/background.png)repeat top center;padding:20px0;position:relative;text-shadow:01px0rgba(255,255,255,.8);-webkit-font-smoothing: subpixel-antialiased;}#container {width:580px;padding:10px;margin:0auto;position:relative;z-index:0;}#example {width:600px;height:350px;position:relative;}#ribbon {position:absolute;top:-3px;left:-15px;z-index:500;}#frame {position:absolute;z-index:0;width:739px;height:341px;top:-3px;left:-80px;}#slides {position:absolute;top:15px;left:4px;z-index:100;}.slides_container {width:570px;overflow:hidden;position:relative;display:none;}.slides_container div.slide { width:570px;height:270px;display:block;}#slides.next,#slides.prev {position:absolute;top:107px;left:-39px;width:24px;height:43px;display:block;z-index:101;}#slides.next {left:585px;}.pagination {margin:26px auto0;width:100px;}.pagination li {float:left;margin:01px;list-style:none;}.pagination li a {display:block;width:12px;height:0;padding-top:12px;background-image:url(../img/pagination.png);background-position:00;float:left;overflow:hidden;}.pagination li.current a {background-position:0-12px;}.caption {z-index:500;position:absolute;bottom:-35px;left:0;height:30px;padding:5px20px020px;background:#000;background:rgba(0,0,0,.5);width:540px;font-size:1.3em;line-height:1.33;color:#fff;border-top:1px solid#000;text-shadow:none;}#footer {text-align:center;width:580px;margin-top:9px;padding:4.5px018px;border-top:1px solid#dfdfdf;}#footer p {margin:4.5px0;font-size:1.0em;}a:link,a:visited {color:#599100;text-decoration:none;}a:hover,a:active {color:#599100;text-decoration:underline;}.img_css{width:570px;height:270px;}JS：(function(a){a.fn.slides=function(b){return b=a.extend({},a.fn.slides.option,b),this.each(function(){function w(g,h,i){if(!p&&o){p=!0,b.animationStart(n+1);switch(g){case"next":l=n,k=n+1,k=e===k?0:k,r=f*2,g=-f*2,n=k; break;case"prev":l=n,k=n-1,k=k===-1?e-1:k,r=0,g=0,n=k;break;case"pagination":k=parseInt(i,10),l=a("."+b.pagin ationClass+" li."+b.currentClass+" a",c).attr("href").match("[^#/]+$"),k>l?(r=f*2,g=-f*2):(r=0,g=0),n=k}h==="fade"?b.crossfade?d.children(":eq("+k +")",c).css({zIndex:10}).fadeIn(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(" :eq("+k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+l+")",c).css({display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+l+")",c).css( {display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1)}):d.childr en(":eq("+l+")",c).fadeOut(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(":eq(" +k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasin g)}):d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing,function(){a.browser.msie&&a(this).get(0).style. removeAttribute("filter")}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+k+")").css({left:r,display:"block" }),b.autoHeight?d.animate({left:g,height:d.children(":eq("+k+")").outerHeight()},b.slideSpeed,b.slideEasing,functi on(){d.css({left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"no ne",zIndex:0}),b.animationComplete(k+1),p=!1}):d.animate({left:g},b.slideSpeed,b.slideEasing,function(){d.css({ left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"none",zIndex:0 }),b.animationComplete(k+1),p=!1})),b.pagination&&(a("."+b.paginationClass+"li."+b.currentClass,c).removeClass(b.currentClass),a("."+b.paginationClass+"li:eq("+k+")",c).addClass(b.currentClass))}}function x(){clearInterval(c.data("interval"))}function y(){b.pause?(clearTimeout(c.data("pause")),clearInterval(c.data("interval")),u=setTimeout(function(){clearTimeou t(c.data("pause")),v=setInterval(function(){w("next",i)},b.play),c.data("interval",v)},b.pause),c.data("pause",u)):x( )}a("."+b.container,a(this)).children().wrapAll('<div class="slides_control"/>');var c=a(this),d=a(".slides_control",c),e=d.children().size(),f=d.children().outerWidth(),g=d.children().outerHeight(),h= b.start-1,i=b.effect.indexOf(",")<0?b.effect:b.effect.replace("","").split(",")[0],j=b.effect.indexOf(",")<0?i:b.effect.replace("","").split(",")[1],k=0,l=0,m=0,n=0,o,p,q,r,s,t,u,v;if(e<2)returna("."+b.container,a(this)).fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()}),a("."+b.next+", ."+ b.prev).fadeOut(0),!1;if(e<2)return;h<0&&(h=0),h>e&&(h=e-1),b.start&&(n=h),b.randomize&&d.randomize(),a( "."+b.container,c).css({overflow:"hidden",position:"relative"}),d.children().css({position:"absolute",top:0,left:d.ch ildren().outerWidth(),zIndex:0,display:"none"}),d.css({position:"relative",width:f*3,height:g,left:-f}),a("."+b.conta iner,c).css({display:"block"}),b.autoHeight&&(d.children().css({height:"auto"}),d.animate({height:d.children(":eq ("+h+")").outerHeight()},b.autoHeightSpeed));if(b.preload&&d.find("img:eq("+h+")").length){a("."+b.container,c ).css({background:"url("+b.preloadImage+") no-repeat 50% 50%"});var z=d.find("img:eq("+h+")").attr("src")+"?"+(newDate).getTime();a("img",c).parent().attr("class")!="slides_control"?t=d.children(":eq(0)")[0].tagName.toLowerCas e():t=d.find("img:eq("+h+")"),d.find("img:eq("+h+")").attr("src",z).load(function(){d.find(t+":eq("+h+")").fadeIn( b.fadeSpeed,b.fadeEasing,function(){a(this).css({zIndex:5}),a("."+b.container,c).css({background:""}),o=!0,b.slid esLoaded()})})}elsed.children(":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()});b.bigTarget&&(d.ch ildren().css({cursor:"pointer"}),d.children().click(function(){returnw("next",i),!1})),b.hoverPause&&b.play&&(d.bind("mouseover",function(){x()}),d.bind("mouseleave",function() {y()})),b.generateNextPrev&&(a("."+b.container,c).after('<a href="#" class="'+b.prev+'">Prev</a>'),a("."+b.prev,c).after('<a href="#" class="'+b.next+'">Next</a>')),a("."+b.next,c).click(function(a){a.preventDefault(),b.play&&y(),w("next",i)}),a(". "+b.prev,c).click(function(a){a.preventDefault(),b.play&&y(),w("prev",i)}),b.generatePagination?(b.prependPagin ation?c.prepend("<ul class="+b.paginationClass+"></ul>"):c.append("<ul class="+b.paginationClass+"></ul>"),d.children().each(function(){a("."+b.paginationClass,c).append('<li><ahref="#'+m+'">'+(m+1)+"</a></li>"),m++})):a("."+b.paginationClass+" li a",c).each(function(){a(this).attr("href","#"+m),m++}),a("."+b.paginationClass+"li:eq("+h+")",c).addClass(b.currentClass),a("."+b.paginationClass+" li a",c).click(function(){returnb.play&&y(),q=a(this).attr("href").match("[^#/]+$"),n!=q&&w("pagination",j,q),!1}),a("a.link",c).click(function() {returnb.play&&y(),q=a(this).attr("href").match("[^#/]+$")-1,n!=q&&w("pagination",j,q),!1}),b.play&&(v=setInterval(fu nction(){w("next",i)},b.play),c.data("interval",v))})},a.fn.slides.option={preload:!1,preloadImage:"/img/loading.gi f",container:"slides_container",generateNextPrev:!1,next:"next",prev:"prev",pagination:!0,generatePagination:!0,p rependPagination:!1,paginationClass:"pagination",currentClass:"current",fadeSpeed:350,fadeEasing:"",slideSpeed: 350,slideEasing:"",start:1,effect:"slide",crossfade:!1,randomize:!1,play:0,pause:0,hoverPause:!1,autoHeight:!1,aut oHeightSpeed:350,bigTarget:!1,animationStart:function(){},animationComplete:function(){},slidesLoaded:functio n(){}},a.fn.randomize=function(b){function c(){return Math.round(Math.random())-.5}return a(this).each(function(){var d=a(this),e=d.children(),f=e.length;if(f>1){e.hide();var g=[];for(i=0;i<f;i++)g[g.length]=i;g=g.sort(c),a.each(g,function(a,c){varf=e.eq(c),g=f.clone(!0);g.show().appendTo(d),b!==undefined&&b(f,g),f.remove()})}})}})(jQuery)$(function(){$('#slides').slides({preload: true,preloadImage: 'img/loading.gif',play: 5000,pause: 2500,hoverPause: true,animationStart: function(current){$('.caption').animate({bottom:-35},100);if (window.console && console.log) {// example return of current slide numberconsole.log('animationStart on slide: ', current);};},animationComplete: function(current){$('.caption').animate({bottom:0},200);if (window.console && console.log) {// example return of current slide numberconsole.log('animationComplete on slide: ', current);};},slidesLoaded: function() {$('.caption').animate({bottom:0},200);}});});HTML：<body><div id="container"><div id="example">&nbsp;<div id="slides"><div class="slides_container"><div class="slide"><a href=""target="_blank"><img src="img/1.jpg" class='img_css'></a><div class="caption"style="bottom:0"><p>农民工人1</p></div></div><div class="slide"><img src="img/2.jpg"class='img_css'><div class="caption"><p>农民工人2</p></div></div><div class="slide"><img src="img/3.jpg"class='img_css'><div class="caption"><p>黑洞</p></div></div><div class="slide"><img src="img/4.jpg"class='img_css'><div class="caption"><p>嘿嘿的</p></div></div></div><a href="#"class="prev"><img src="img/arrow-prev.png"width="24"height="43" alt="Arrow Prev"></a><a href="#"class="next"><img src="img/arrow-next.png"width="24"height="43" alt="Arrow Next"></a></div><img src="img/example-frame.png"width="739"height="341"alt="Example Frame" id="frame"></div></div></body>。