说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

免费jQuery幻灯片图片轮播插件Galleriffic的使用方法

HTML文档下载 WORD文档下载 PDF文档下载
一款多种样式的jQuery相册插件。

这款相册适合图片较多的情形,图片索引可以分页显示。

 

使用方法:
添加引用:
<head>
...
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>

<!-- Optionally include jquery.history.js for history support -->
<script type="text/javascript" src="js/jquery.history.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
...
</head>

添加容器元素:
<div id="controls"></div>
<div id="loading"></div>
<div id="slideshow"></div>
<div id="caption"></div>
<div id="thumbs">
... graceful degrading list of thumbnails (specific format specified below) ...
</div>

添加图片:
<div id="thumbs">
<ul class="thumbs noscript">
<li>
<a class="thumb" name="optionalCustomIdentifier" href="path/to/slide" title="your image title">
<img src="path/to/thumbnail" alt="your image title again for graceful degradation" />
</a>
<div class="caption">
(Any html can go here)
</div>
</li>
... (repeat for every image in the gallery)
</ul>
</div>

初始化galleriffic插件:
jQuery(document).ready(function($) {
var gallery = $('#thumbs').galleriffic({
delay: 3000, // in milliseconds
numThumbs: 20, // The number of thumbnails to show page
preloadAhead: 40, // Set to -1 to preload all images
enableTopPager: false,
enableBottomPager: true,
maxPagesToShow: 7, // The maximum number of pages to display in either the top or bottom pager
imageContainerSel: '', // The CSS selector for the element within which the main slideshow image should be rendered
controlsContainerSel: '', // The CSS selector for the element within which the slideshow controls should be rendered
captionContainerSel: '', // The CSS selector for the element within which the captions should be rendered
loadingContainerSel: '', // The CSS selector for the element within which should be shown when an image is loading
renderSSControls: true, // Specifies whether the slideshow's Play and Pause links should be rendered
renderNavControls: true, // Specifies whether the slideshow's Next and Previous links should be rendered
playLinkText: 'Play',
pauseLinkText: 'Pause',
prevLinkText: 'Previous',
nextLinkText: 'Next',
nextPageLinkText: 'Next &rsaquo;',
prevPageLinkText: '&lsaquo; Prev',
enableHistory: false, // Specifies whether the url's hash and the browser's history cache should update when the current slideshow image changes
enableKeyboardNavigation: true, // Specifies whether keyboard navigation is enabled
autoStart: false, // Specifies whether the slideshow should be playing or paused when the page first loads
syncTransitions: false, // Specifies whether the out and in transitions occur simultaneously or distinctly
defaultTransitionDuration: 1000, // If using the default transitions, specifies the duration of the transitions
onSlideChange: undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
onTransitionOut: undefined, // accepts a delegate like such: function(slide, caption, isSync, callback) { ... }
onTransitionIn: undefined, // accepts a delegate like such: function(slide, caption, isSync) { ... }
onPageTransitionOut: undefined, // accepts a delegate like such: function(callback) { ... }
onPageTransitionIn: undefined, // accepts a delegate like such: function() { ... }
onImageAdded: undefined, // accepts a delegate like such: function(imageData, $li) { ... }
onImageRemoved: undefined // accepts a delegate like such: function(imageData, $li) { ... }
});
});

下载完整demo源码

扁平化设计或成下一个流行趋势吗? 永生、登天、出唱片、开托儿所,IT大佬业余还玩什么? 终于盼来了:苹果iOS7 Beta 3、Xcode5预览版 可堆叠的创意 开源硬件Microduino开发团队专访 致任天堂的公开信:我想在iPhone上玩超级玛丽 为什么OpenStack被视为新的Linux? Netflix开源Pig可视化框架:Lipstick Tangle:一个开源的数据交互式JS库 云储存服务Dropbox用户达1.75亿 旨在同步而非保存 Windows Server 2012 R2里十个极好的新功能 走向台前的地图服务 彰显LBS应用的创新力量 调查显示:1/5的企业采用SDN技术 Chrome 28正式登陆Windows及Mac 成首个使用Blink内核的浏览器版本 不只是Chrome,Firefox也开始支持Web Audio API 验证HTML的5个原因和5个资源 微软WPC 2013:Office 365融合BI,Cloud OS加速,Intune折扣,SQL高版本数据库等 移动开发者走向全能开发者的五大技能 360和西部数码战略合作 一键开启为国内30万家网站提供免费安全服务 中兴携手英特尔发布基于X86的Geek手机 应用生态建设仍需努力 微软将WP周期延长至36个月 明年推企业功能包 Gartner:全球PC出货量二季度下滑11% 联想成全球最大PC厂商 用来简化开发任务的20个JavaScript类库 煎饼,娇妻,Belief:黄太吉的移动互联网营销 AWS大降价:最高打两折 推荐十款超赞的Google Chrome扩展插件 在团队中进行单元测试/TDD的12条经验 小米游戏中心6月数据报告:页游转手游怎么搞? 司机请专心:安全是车载APP要解决的大问题 Windows 8之父Steven Sinofsky:跨平台开发会为什么越来越难? 一些达成共识的JavaScript编码风格约定 语义技术——微软、谷歌和Facebook的必争之地 请问,如何设置 键盘开机呀? 关于光驱 如何获取delphi中dbgrid的单元格的内容 问题征解,关于一个智力题的程序解法。 sos!!求救!!!java运行时环境设置的初级问题!各位大侠帮忙了!!!! :-(( 關于delphi6的ActionMainMenuBar组件和ActionToolBar组件 的菜鳥級問題?? 李维的电子商务篇的第二章的例子没法运行,这是为何? 谁能告诉我学VC的步骤和教材啊,还会加分啊 如何将一个可以滚动的窗口的全部内容转换为BMP保存起来(如:IE)?(提供线索就有分)欢迎参与成果供享!!! 请教关于VsPrint Oracle8i Enterprise Manager Release 2.1 相当于ORACLE8.1.几啊? 使用ListView如何操作数据 ★★★简单问题送100分★★★:如何打印框架容器里的的全部内容,包括mschart图表,label,combox等? 我的DW里加入FLASH特效时为什么中文会变成乱码?我给分的............ 我感到天昏地暗、日月无光、前途渺茫、无心睡眠、精神恍惚、双目痴呆相恋8年准备结婚的女友突然和别人结婚了!我受不了了!我快疯了! 请教有关IE5带的ActiveX控件Dhtmled.ocx的98下安装问题 程序员与高级程序员到底那个好过 关于 delphi的一点东东 access一个日期时间字段是短格式的,用什么SQL语句改成长格式的? 怎样才能在主页中显示自己的qq是否在线?????? 有没有平面按钮控件 Interdev6.0 IDE 环境下无法使用MSDN access一个日期时间字段是短格式的,用什么SQL语句改成长格式的?? 大家来帮帮我想想?应该怎么样来删除呢!!!! 各位用VB.net的兄弟,请问你们使得是 Beta1 还是 Beta2 ? 迷周星弛的请来签名啊! 如何操纵RichTextEdit控件??? 我得到GIF图像的这一点的值,怎样得到它的正确的RGB值? 我想请问在CHTML(compact html)中如何对页面进行刷新。 各位老大,你们是如何找到工作的? 在VB.net中,如何实现VB6中的 set A=createobject("XXXX.XXXX") 诸位大虾救命,如何在EDIT控件中判断DBCS字符 !!求救!!对时!!! 在VC中使用Crystal report 8的问题 如何编写c程序自动对GIF图片设置大小 请教:鼠标在windows桌面上按键是否会引发某个事件? 查看DLL的输出函数 menu的问题 web的组件由什么来编写? 嵌入式数据窗口,怎样可以动态往里插数据窗口??? 在DELPHI中如何调用NETBIOS的API函数 AddNew 怎么用?- 怎么办那,啊? 问题标题前的绿色的对号是什么意思?是不是表示问题已经解决? 怎么学VC啊,菜鸟的菜菜的问题啊。 关于打印比较 提取汉字的拼音 四级挂了,给分,气死了 难题时时有,把它问诸位,不知哪位高手,今日肯帮俺------解决送个人照片(不知各位肯要否?) 刚考完英语四级,来这里发泄一下。同时送上300分! PHP和JAVA如何通讯? 求函数f(x)=3x^2-5x+2.x属于[0,2]的值域? 5除=5分之1解方程 4.2X除1.6—14=0.175解方程 40分之7等于x加20分之70怎么计算?打错了 是40/7=X+20/30 函数y=(x^2-4x-5)/(x^2-3x-4)的值域是?.. 解方程4^x-2^(x+2)-12=0 解方程:4.8+2.1x=15.3, +求函数y=(5x-1)/(4x+2)x属于【-3,-1】的值域. 5/1X-4/1X=40 怎么解(方程) 解方程:20%X-5分之1=5分之4 4分之1X+3分之1=1又6分之1 求函数y=(x^2-4x+5)/(x^2-3x-4)的值域 x-5分之1x=40 解方程 解方程:5分之2+5分之1X=2 3x的平方减5x减2分之1减3的差加2x方的和 35x-12=51 x+2.1x=1.55 3/4x+1/2x=75 4.2x除以2=12.6应用1、强强和年年同时从学校出发,沿同一条路去2000米外的少年宫,强强骑车每分钟行210米,年年走着去每分钟60米.多少分钟后两人相距1200米2、(这个不 解方程.2分之1X+3分之1X=20分之1 X分之0.5=0.8分之3 X:3.25=5分之1:4分之5 求函数y=3x+1/x-2的值域 如果x+24=51,那么x-24=()写出思考过程 解方程 1x=(1-20%)乘(x+6)解方程 若x²-3x+1=0,则x²/x四次方+x²+1的值为___ 求函数Y=3x/(3x+1)的值域. 五十一至五十五 x+x分之一=2 求分式x的4次方—x的2次方+1分之3x的2次方的值 1.求函数 y=(1/3)^(-x^2+5x)的值域 2.函数y=(2/5)^(根号下7-3x+21.求函数 y=(1/3)^(-x^2+5x)的值域2.函数y=(2/5)^(根号下7-3x+2x方) x-5分之2-3分之1x=5分之12 怎么解 使分式3x+6/x平方-4的值为整数的整数x的值有几个? 求函数的值域y=3x+2/x-1 用配方法解方程 (1) 2x平方-4x-1=0 (2) 4分之1x平方-6x=3=0 要使分式3x+4/x-1的值为整数的正整数x= 已知函数f(x)=lg(2+x)+lg(2-x) 1.函数g(x)=[10^f(x)]+3x,求函数g(x)的值域.2.若不等式f(x)>m有解.求实数m的取值范围 4分之1x除以百分之40等于8分之5 x为整数,且分式3x-1/x+3的值也为整数,求满足要求的所有x的和 若x 0.7X1又9分子4+2又4分子3x(-15)+0.7x9分子5+4分子1x(-15)等于多少 若x的平方+3x+1=0,试求分式x的平方+1/x的平方 函数f(x)=(3x-1)/(3x+1)的值域最说出怎么算的注:是3的x次方 f(x)=(3^x-1)/(3^x+1) 二楼的SNOWHORSE70121,u为什么不等于1? 2乘7分之2+3分之1x=2.5怎样解方程, 如果x为整数,且分式(x的平方-1)分之(2x+2)的值为正整数,那么x的值为 6X的平方减5X等于2,用工式方法解 解方程 6分之1x-12.5%乘7=3分之2 已知X为整数,且分式2X+2X\X的平方-1的值 解方程3分之2X-4分之1X=8分之5 20(X+5)=200 8分之1.[7分之1(6分之1X-5)-4]-3=2 解方程 使分式(x+1)的3次方分之2X的平方-4X+2的值为整数的X的整数值有哪些 解方程:【x-20-12】乘4分之1=【x+12】乘16分之3 4分之1x÷2=8分之3 解方程 、、、谢谢 当x不等于零时,函数 y=3x+1/2x 的值域是 A.[-√6,√6]B.(-∞,-√6]∪(√6,+∞)C.(-∞,-√6]∪[√6,+∞) 解方程12分之x-20分之2x-1=3分之x+4-1时方程两边都乘 4分之1x÷2=8分之3 1)y=x^2+3x-4:x^2+x+2 (2)y=x^2-5x+4:x^2-2x-8,x大于等于2小于等于3.求值域, 解方程x^3-13x-12=0 12分之1x+8分之5=4 解方程 y=-x+1/2x-3(-2 15(x-12)-13x=1020 8一X的负倒数为19,X一97 (1)y=x^2+3x-4:x^2+x+2 (2)y=x^2-5x+4:x^2-2x-8,x大于等于2小于等于3.求值域 解方程:x-16分之3x=27.2 当x等于多少时,√x+√6与√x-√6互为倒数 函数f(x)=3x的平方-5x+2.x∈[0,2]的值域是可以不用配方法求吗 有别的方法求出来吗? 解方程:2分之1:3分之1=4分之1:x . 3:x=9:27 . 6:25分之9=5分之4:x .x:12=4.2:3.5.有4题,要过程. 0.75加25%X等于8分之7,
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn