使用方法：
引入JQ库与插件js
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
- <script type="text/javascript" src="js/jquery.galleriffic.js"></script>
添加容器html
- <div id="controls"></div>
- <div id="loading"></div>
- <div id="slideshow"></div>
- <div id="caption"></div>
- <div id="thumbs">
- ... 这里用来放图片清单...
- </div>
建立图片清单列表
- <ul class="thumbs noscript">
- <li>
- <a class="thumb" 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">
- (这里用来放标题、描述等信息)
- </div>
- </li>
- ... (接下的就是类似上面的li代码，一个li元素包含一张图片)
- </ul>
初始化插件：
- var gallery = $('#gallery').galleriffic('#thumbs', {
- delay: 3000 // 动画播放间隔时间
- numThumbs: 20 // 所要显示的图片数目
- preloadAhead: 40 // 设置为-1时预加载所有图片
- enableTopPager: false,
- enableBottomPager: true,
- imageContainerSel: '', // 接下来的三个属性是作为容器的css名
- 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, // 是否显示播放与暂停按钮
- renderNavControls: true, // 是否显示前进后退按钮
- playLinkText: 'Play',
- pauseLinkText: 'Pause',
- prevLinkText: 'Previous',
- nextLinkText: 'Next',
- nextPageLinkText: 'Next ›',
- prevPageLinkText: '‹ Prev',
- enableHistory: false, // Specifies whether the url's hash and the browser's history cache should update when the current slideshow image changes
- autoStart: false, // 是否自动播放
- onChange: undefined, // 接下来是插件的回调函数
- onTransitionOut: undefined, // accepts a delegate like such: function(callback) { ... }
- onTransitionIn: undefined, // accepts a delegate like such: function() { ... }
- onPageTransitionOut: undefined, // accepts a delegate like such: function(callback) { ... }
- onPageTransitionIn: undefined // accepts a delegate like such: function() { ... }
- });
（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）
