jquery实现图片翻转特效
- 格式：doc
- 大小：206.00 KB
- 文档页数：8
文档推荐
-
实验七：jQuery实现轮换广告页数:4
-
Html网页显示js轮播图页数:4
-
Html、js图片轮播代码页数:4
-
网页制作-网站首页焦点图轮播切换效果页数:8
-
超级漂亮的jQuery焦点图广告轮播特效页数:4
下载文档原格式
合集下载
4 个超炫的免费 jQuery 翻页插件
4 个超炫的免费jQuery 翻页插件
模拟真实的世界一直是计算机科学在做的事情。
在网页设计领域，模拟书籍翻页就是其中一项。
以前我们用Flash实现。
但是随着网页技术的提升，我们现在也可以用HTML、CSS和JavaScript实现。
下面我将介绍几个绚丽的免费jQuery插件来实现翻页效果。
1. Turn.js
第一页作为封面，后面的每一页你都可以通过反动页脚来实现。
动画过程很顺滑。
这个js只有15kb，可以在移动浏览器上运行。
这个js使用了硬件加速。
2. jPageFlip
jPageFlip是一个高度可定制的jQuery插件，用来创建类似书籍界面的效果。
它支持鼠标点击翻页，也支持透明和半透明的图片文件。
3. Booklet
Booklet可能是拥有最多选项的插件。
你可以通过键盘，链接，或者定时自动翻页。
每一页都有一个单独的URL，可以被收藏。
4. FlipPage
这个插件的翻页效果是在现有的图片范围内。
使用了HTML5，CSS3以及硬件加速。
这个插件也支持移动浏览器。
另外还有其他两个类似的插件：jFlip / CSS Page Flip
以上内容由重庆电脑维修公司，重庆寻诚科技整理，转载请注明链接：。
jQuery图片轮播滚动切换代码分享
jQuery图⽚轮播滚动切换代码分享本⽂实例讲述了jQuery图⽚轮播滚动切换特效。
分享给⼤家供⼤家参考，具体如下：jQuery图⽚轮播滚动切换代码是⼀款简单的jquery四张图⽚轮播滚动切换效果代码，实现过程很简单。
运⾏效果图：------------------- -------------------⼩提⽰：浏览器中如果不能正常运⾏，可以尝试切换浏览模式。
在head区域引⼊CSS样式：<link rel="stylesheet" type="text/css" href="css/style.css" />为⼤家分享的jQuery图⽚轮播滚动切换代码如下<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery图⽚轮播滚动切换代码</title><script type="text/javascript" src="js/jquery-1.7.2.js"></script><script type="text/javascript" src="js/script.js"></script><link rel="stylesheet" type="text/css" href="css/style.css" /></head><body><div class="Div1"><b class="Div1_prev Div1_prev1" ><img src="images/lizi_img011.jpg" title="上⼀页" /></b><b class="Div1_next Div1_next1" ><img src="images/lizi_img012.jpg" title="下⼀页"/></b><div class="Div1_main"><div><span class="Div1_main_span1"><a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a><a href="javascript:void(0)" class="Div1_main_a2">+详情点击</a></span><span><a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a><a href="javascript:void(0)" class="Div1_main_a2">+详情点击</a></span><span><a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a><a href="javascript:void(0)" class="Div1_main_a2">+详情点击</a></span><span><a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a><a href="javascript:void(0)" class="Div1_main_a2">+详情点击</a></span></div><div><span><a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a><a href="javascript:void(0)" class="Div1_main_a2">+详情点击</a></span><span><a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a><a href="javascript:void(0)" class="Div1_main_a2">+详情点击</a></span><span><a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a><a href="javascript:void(0)" class="Div1_main_a2">+详情点击</a></span><span><a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a><a href="javascript:void(0)" class="Div1_main_a2">+详情点击</a></span></div><div><span><a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a><a href="javascript:void(0)" class="Div1_main_a2">+详情点击</a></span><span><a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a><a href="javascript:void(0)" class="Div1_main_a2">+详情点击</a></span><span><a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a><a href="javascript:void(0)" class="Div1_main_a2">+详情点击</a></span><span><a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a><a href="javascript:void(0)" class="Div1_main_a2">+详情点击</a></span></div></div></div></body></html>以上就是为⼤家分享的jQuery图⽚轮播滚动切换特效代码，希望⼤家可以喜欢，并应⽤到实践中。
实现图片滚动效果。JQ 我的方案和书上的方案
//$(document).ready( function()//{////--假设有十条记录。
其实是相片数据//var thenew;//for(var v=0;v<10;v++)// thenew=$("<div></div>").addClass("itemlist").append("<img src='img/"+(v+1)+".jpg' alt='图片' width='200px' heigth='200px' /> ").appendTo("#col");////--获取top 和高度//varsrcpoi=$(".itemlist:eq(0)").css("top"),heig=$(".itemlist").eq(0).css("heigth"),srcpoi1;//srcpoi1= srcpoi;////--获取定时器ID。
用来停用定时器//var thid;////--获取 itemlist 类的集合//var tag=$("#col .itemlist");////--获取集合长度//var leg=tag.length;////--渐变必须有一个当前值和上一个值//var cur=0,prev=0;////--注意这里当一个完成了渐变之后要将其放到队列最后////--是否继续//var doe=false;////var d1=true;//// //-在加载结束后，使透明变为100%，实现一个又不透明到透明的国度$(this).fadeTo("slow",1,function(){ $(this).animate({top:srcpoi1},1000);});////var curhide=function(){ cur=prev++%leg; if(prev>100){prev=0;} ;d1=true;tag.eq(cur).css("top",srcpoi1); thid=setTimeout(time,1000) };////--让其移动到外面不就行了。
jQuery实现点击图片翻页展示效果的方法
这篇文章主要介绍了jQuery实现点击图片翻页展示效果的方法,涉及jQuery操作图片的操作技巧,非常具有实用价值,需要的朋友可以参考下本文实例讲述了jQuery实现点击图片翻页展示效果的方法。
分享给大家供大家参考。
具体实现方法如下：代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title>基于jQuery实现的点击图片翻页展示效果</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">.div{width:240px;height:90px;z-index:0;position:absolute;left:10px;border:2px #3300FF solid;border:0px;color:#FFFFFF;margin-left:320px;}</style><script type="text/javascript" src="/images/jquery1.3.2.js"></script><script type="text/javascript">$(function(){var z=-1;$("div").click(function(){$(this).animate({left:"350px"},1000,function(){$(this).css("zIndex",z--)}).animate({left:"10px"}, 1000);})});</script></head><body>若不能显示效果，则刷新页面可正常。
21个演示展示强大的jQuery特效
21个演示展示强大的jQuery特效
就在不久之前, Flash 是被web设计师用来为网站添加交互的重要技术之一！自从Ipad诞生, 并且不支持 Flash Player, 加速了web开发中使用其他技术代替flash，比如 jQuery, Ajax 还有其它。
尽管在很多情况下Flash在仍然是一个非常强大和有用的工具,web设计师习惯于用flash完成一些特效，但这些都能用jQuery轻松实现！下面有21 个在线的演示来显示jQuery在制作高级特效和交互方面的强大能力，可以媲美Flash！
1. Flip! 一个 jQuery 插件
这个演示模仿流行的卡片翻转的效果，可以360度旋转自身，x 或y维度！
2. jQuery Quicksand 插件
这是一个强大的插件用来在页面上排序数组的元素/图标,有酷的渐入 /渐出和动画特效！
3. ImageFlow
这个图像浏览器和苹果的CoverFlow界面很相似，让用户能够很熟悉他们的产品和应用！
4. 用jQuery代替flash建立一个交互性地图
这个演示展示了jQuery用ajax技术创造迷人的界面的强大能力！
5. 用jQuery & CSS3滑出消息
点击+号用漂亮的光滑的动画效果展示附加的信息！。
jQuery360度图像旋转插件相关介绍
jQuery360度图像旋转插件相关介绍
今天为大家介绍的是jQuery360度图像旋转插件，希望大家学业有成，工作顺利
就像我们都知道的，网站对于帮助一个公司接触到远端的人群是最重要的工具。
因此，每位网页设计师都重视创造高度吸引人的网站，将流量诱导向它。
为取得对竞争
者的优势，网站开发者们喜欢采用能帮助他们在他们的网站上增添吸引性效果的工具，特别是那些让你在网站上添加图像的工具。
当涉及在网站上展示图像时，jQuery360度图像旋转插件就是你最好的筹码。
这些插件远比Flash文件更有效，而且和响应式网页设计概念兼容。
今天小编就给大家带来你不能错过的6款jQuery360度图像旋转插件。
1.AJAX-ZOOM——360/3D旋转&缩放Javascript播放器
AJAX-ZOOM是款免费的Flash工具，有助于在网页上360度展示产品图像。
另外，这款插件让用户能在Z轴(3D)上转物体。
不仅如此，它还让用户能在每个产品的结构上深度缩放。
你可以把这款插件嵌入任何CMS或购物车。
2.Rotary View
想要让你的顾客能用鼠标来360度旋转产品图像吗?那好，Rotary View就是你的最佳方案。
它利用一整套图像来为顾客提供神奇的产品360度视角。
它是响应式的，因此在触控屏设备上也效果良好。
3.Dopeless Rotate。
用jquery实现图片的切换与随机显示 (1)
用jquery实现图片的切换与随机显示本例所要实现的效果如下：1单击按钮，能够切换图片切换之前，如图1所示：图1切换之后，如图2所示：图22图片每次切换后，位置是随机变化的切换之前，如图3所示：图3切换之后，如图4所示：图43第一次所有图片加载时，效果是淡入的，加载完之后的所有切换淡入效果消失。
（由于此效果难截图，所以不能显示）4鼠标移上去，图片变大，下边显示有关于图片的描述信息如图5所示：图5下边有关此效果的具体实现步骤。
前提将html，css样式，所需图片，准备好，源文件放在源文件文件夹下边。
为操作方便，布局采用的是table+div。
本例图片分两组，一组显示12张图片。
①单击按钮，切换图片打开浏览器时，图片并未直接加载在页面中，而是通过调用js代码将第一组图片一张张加载进去。
关键代码如下$(document).ready(function(){for(var i=0;i<=11;i++){$("#i"+i).attr("src","imgs/0"+i+".jpg").hide().fadeIn(2000);//通过图片id获取图片路径}})补充：为方便加载图片，图片的命名规则是00,01,02 (011)10,11,12…111;这样做的好处是通过图片名字的第一位数判断图片所属的组数，由于浏览器是第一次加载图片，显示的是第一组，所以上述代码图片的第一位直接是0.当单击按钮时，会触发randomImage()事件，即切换图片。
关键代码如下: function randomImage(){count++; //用来记录单击按钮的次数，设为全局变量，初始值为0count=count%2;//遍历完一遍图片后，将count置为0，可以循环切换图片，并且能够通过count识别应该加载第几组图片，本例用的是两组图片，如果是多组图片，此方法照样可以用。
JavaScript图片翻转，垂直和水平
JavaScript图片翻转，垂直和水平JavaScript垂直和水平翻转图片，翻转过程中你可以和原图进行比较，本实例仅水平和垂直翻转，暂不能指定旋转角度，仅供参考。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"""><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>JavaScript图片翻转效果</title></head><body><table width="433" border="2" align="center" cellpadding="3" cellspacing="4" bordercolor="#006699" bgcolor="#FFFFFF"><tr><td colspan="2"><div align="center"><font color="#FF0000" size="6">水平翻转</font></div></td> </tr><tr><td width="165"><font color="#FF9900" face="黑体" size="4">原图：</font></td><td width="252"><font color="#FF9900" face="黑体" size="4">水平翻转执行结果：</font></td></tr><tr><td><img src="/images/logo.gif" border="0"id="image1"></td><td><img src="/images/logo.gif" border="0" id="image11"></td></tr><tr><td colspan="2"><div align="center"><font color="#FF0000" size="6">垂直翻转</font></div></td> </tr><tr><td><font color="#FF9900" face="黑体" size="4">原图：</font></td><td><font color="#FF9900" face="黑体" size="4">垂直翻转执行结果：</font></td></tr><tr><td><img src="/images/logo.gif" border="0" id="image2"></td><td><img src="/images/logo.gif" border="0" id="image22"></td></tr></table><p><center><input type="button" name="button1" value="水平翻转" onClick="Hturn()"><input type="button" name="button2" value="垂直翻转" onClick="Vturn()"></center></p><script language="javascript">function Hturn()//水平翻转{image11.style.filter = image11.style.filter =="fliph"?"":"fliph"; }function Vturn()//垂直翻转{image22.style.filter = image22.style.filter =="flipV"?"":"flipV"; }</script></body></html>。
jquery实现图片左右切换的方法
jquery实现图⽚左右切换的⽅法本⽂实例讲述了jquery实现图⽚左右切换的⽅法。
分享给⼤家供⼤家参考。
具体实现⽅法如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>图⽚左右滚动</title><script src="jquery-1.6.2.min.js" type="text/javascript"></script><script>$(function(){var i=0;var li = $(".lxfscroll li");var n=li.length-1;var speed = 300;li.not(":first").css({left:"400px"});li.eq(n).css({left:"-400px"});lxfNext=function (){if (!li.is(":animated")) {if (i>=n){i=0;li.eq(n).animate({left:"-400px"},speed);li.eq(i).animate({left:"0px"},speed);}else{i++;li.eq(i-1).animate({left:"-400px"},speed);li.eq(i).animate({left:"0px"},speed);};li.not("eq(i)").css({left:"400px"});$("i").text(i+1);}else{};};lxfLast=function (){if (!li.is(":animated")) {if (i<=0){i=n;li.eq(0).animate({left:"400px"},speed);li.eq(n).animate({left:"0px"},speed);}else{i--;li.eq(i+1).animate({left:"400px"},speed);li.eq(i).animate({left:"0px"},speed);}li.not("eq(i)").css({left:"-400px"});$("i").text(i+1);};};});</script><style type="text/css">* {font-size:12px;color:#333;text-decoration:none;padding:0;margin:0;list-style:none;font-style: normal;font-family: Arial, Helvetica, sans-serif;}.lxfscroll {width:400px;margin-left:auto;margin-right:auto;margin-top: 20px;overflow: hidden;position: relative;height: 300px;border: 1px dashed #CCC;}.button {margin-right:auto;margin-left:auto;width:400px;text-align:center;padding-top: 10px;}i {color:#F00;font-weight:bold;}.button input {padding-top: 4px;padding-right: 12px;padding-bottom: 4px;padding-left: 12px;}.lxfscroll ul li {height: 300px;width: 400px;text-align: center;line-height: 300px;position: absolute;font-size: 40px;font-weight: bold;}</style></head><body><div class="lxfscroll"><ul><li>我是第1张图⽚</li><li>我是第2张图⽚</li><li>我是第3张图⽚</li><li>我是第4张图⽚</li><li>我是第5张图⽚</li><li>我是第6张图⽚</li><li>我是第7张图⽚</li><li>我是第N张图⽚</li></ul></div><div class="button"><input name="a" type="button" onClick="lxfLast()" value="上⼀个" /> <input name="a" type="button" onClick="lxfNext()" value="下⼀个" /> </div><div class="button">当前显⽰的是第 <i>1</i> 张图⽚</div></body></html>希望本⽂所述对⼤家的jQuery程序设计有所帮助。
完美JQuery图片切换效果的简单实现
下面小编就为大家带来一篇完美JQuery图片切换效果的简单实现。
小编觉得挺不错的，现在就分享给大家，也给大家做个参考。
css：body { font-family:"Microsoft Yahei"; }body,ul,li,img,h3,dl,dd,dt,h1{margin:0px;padding:0px;list-style:none;} img{vertical-align: top;}/***大图切换***/.scroll_view{margin: 0px auto;overflow:hidden;position: relative;}.photo_view li{position:absolute;width: 100%;}.photo_view li em,.photo_view li h3{position: absolute;bottom: 0px;z-index: 1;height: 35px;line-height: 35px;width: 100%;left: 0px;}.photo_view li em{z-index: 1;background:rgba(0,0,0,0.5);filter: progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = '#50000000',endColorstr = '#50000000');_background:#000;}.photo_view li h3{z-index: 2;text-indent: 1em;font-weight: normal;}.photo_view li h3 a{color:#fff;}.photo_view li h3 a:hover{color:#f60;}.small_photo{position: absolute;bottom: 40px;right: 10px;cursor: pointer;z-index: 4;}.small_photo li {float: left;padding-right: 10px;}.small_photo li img{width: 80px;height: 35px;border: solid 2px #ccc;border-radius: 2px;} .small_photo li.active img{border: solid 2px #f60;}html：<!-- start:大图切换--><div class="scroll_view"> <ul class="photo_view"> <li><img src="images/ad1.jpg" alt="" class="" /><em></em><h3><a href="javascript:void(0);">图片效果1</a></h3></li> <li><img src="images/ad2.jpg" alt="" class="" /><em></em><h3><a href="javascript:void(0);">图片效果2</a></h3></li> <li><img src="images/ad3.jpg" alt="" class="" /><em></em><h3><a href="javascript:void(0);">图片效果3</a></h3></li> <li><img src="images/ad4.jpg" alt="" class="" /><em></em><h3><a href="javascript:void(0);">图片效果4</a></h3></li> </ul> <ul class="small_photo"></ul></div><!-- End:大图切换-->js：$.fn.extend({ imgScroll:function(options){ var def={phtot_parent:$(".scroll_view"),photo_view:$(".photo_view"),small_photo:$(".small_photo") ,speed:800,isauto:true,width:800,height:349}, opt=$.extend({},def,options), $photo_view=opt.photo_view, $small_photo=opt.small_photo, speed=opt.speed, isauto=opt.isauto, index=0, _length=$photo_view.find("li").length, strTime=null; opt.phtot_parent.css({width:opt.width,height:opt.height}); $photo_view.find("li:not(:first)").hide()//.find("img").hide(); $photo_view.find("li").each(function(i){ $small_photo.append('<li><img src="'+$(this).find("img").attr("src")+'" alt="" class="" /></li>'); }) $small_photo.find("li:first").addClass("active"); //小图鼠标动作 $small_photo.find("li").bind("mouseenter",function(){ clearInterval(strTime); if(index!=$(this).index()){ index=$(this).index(); animate(index) } }).bind("mouseleave",function(){ if(isauto){ start(); } }); //大图悬停动作 $photo_view.find("li").bind("mouseenter",function(){ clearInterval(strTime); }).bind("mouseleave",function(){ if(isauto){ start(); } }); //自动播放 if(isauto){ start(); } //启动自动播放 function start(){ strTime=setInterval(function(){ index >= _length-1 ? index=0 : index++; animate(index); },speed); } //动画效果 function animate(_index){//console.log(_index) $small_photo.find("li").eq(_index).addClass('active').siblings().removeClass("active");//改变小图导航样式 $photo_view.find("li").eq(_index).css("z-index",1).siblings().css("z-index",0);//控制absolute的层级 $photo_view.find("li").eq(_index).show().find("img").css({"opacity": 0}); //装大图的opacity设置为0 $photo_view.find("li").eq(_index).find("img").animate({opacity:1},300,function(){ $(this).removeAttr("style");//动画之后删除opacity $photo_view.find("li").eq(_index).show().siblings().hide();//显示大图 });//展示当前显示动画 } }});<script type="text/javascript"> $(function(){$("scroll_view").imgScroll({photo_view:$(".photo_view"),small_photo:$(".small_ph oto"),speed:3000,isauto:true}); })</script>以上这篇完美JQuery图片切换效果的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
效果图：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"> <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>。