超酷响应式带缩略图的jQuery轮播图插件
PgwSlideshow是一款非常实用的响应式、支持触摸屏的jQuery轮播图插件。该轮播图插件带有缩略图预览效果,可以根据容器的大小自适应图片的宽度。你也可以自定义轮播图的高度,图片宽度会根据高度等比例匹配。
该轮播图插件的特点有:
该轮播图插件依赖于jQuery(1.0以上版本)或Zepto(1.0以上版本)。使用前要移入这些依赖文件。
HTML结构
该轮播图插件的基本HTML结构使用的是无序列表<ul>。你可以添加多个<li>元素,每一个<li>元素中包含一张用于轮播的图片。
调用插件
配置参数
下面是该轮播图插件的一些可用的参数。
方法
下面是该轮播图插件的一些可用方法。
要使用这些方法,必须在轮播图插件初始化时将它保存为一个对象变量。
startSlide :轮播图开始播放。
stopSlide :停止轮播图的播放。
getCurrentSlide :返回当前轮播图片的序号。
getSlideCount :返回轮播图中图片的总数。
displaySlide :通过参数中的数值来显示指定序号的轮播图图片。
nextSlide :显示下一幅图片。
previousSlide :显示前一幅图片。
destroy :销毁轮播图对象。如果传入参数true,那么容器将只是被隐藏起来。
reload :使用新的配置参数来重新加载轮播图插件。
via:http://www.htmleaf.com/jQuery/Sl ... r/201504191707.html
查看演示 下载插件
该轮播图插件的特点有:
- 响应式设计
- 支持桌面和移动手机设备
- 轻量级,压缩后只有4kb
- 可以通过CSS来自定义轮播图的样式
该轮播图插件依赖于jQuery(1.0以上版本)或Zepto(1.0以上版本)。使用前要移入这些依赖文件。
- <link rel="stylesheet" href="/path/to/pgwslideshow.css">
- <script src="jquery/1.11.0/jquery.min.js"></script>
- <script src="/path/to/pgwslideshow.js"></script>
HTML结构
该轮播图插件的基本HTML结构使用的是无序列表<ul>。你可以添加多个<li>元素,每一个<li>元素中包含一张用于轮播的图片。
- <ul class="pgwSlideshow">
- <li><img src="img/1.jpg" alt="..." data-description="..."></li>
- <li><img src="img/thumb.jpg" alt="" data-large-src="img/big-img.jpg"></li>
- <li>
- <a href="#" target="_blank">
- <img src="img/3.jpg" alt="...">
- </a>
- </li>
- ......
- </ul>
- alt:这个属性定义图片的标题,它会在图片显示的时候作为标题显示。
- data-description:该属性会在图片标题下方添加一行新的文本,用于额外的描述信息。
- data-large-src:如果你希望缩略图使用小尺寸的图片,显示的是大尺寸的图片,就可以使用data-large-src属性来指定大尺寸图片的URL。
调用插件
- $(document).ready(function() {
- $('.pgwSlideshow').pgwSlideshow();
- });
配置参数
下面是该轮播图插件的一些可用的参数。
方法
下面是该轮播图插件的一些可用方法。
要使用这些方法,必须在轮播图插件初始化时将它保存为一个对象变量。
- var pgwSlideshow = $('.pgwSlideshow').pgwSlideshow();
startSlide :轮播图开始播放。
- pgwSlideshow.startSlide();
stopSlide :停止轮播图的播放。
- pgwSlideshow.stopSlide();
getCurrentSlide :返回当前轮播图片的序号。
- pgwSlideshow.getCurrentSlide();
getSlideCount :返回轮播图中图片的总数。
- pgwSlideshow.getSlideCount();
displaySlide :通过参数中的数值来显示指定序号的轮播图图片。
- pgwSlideshow.displaySlide(3);
nextSlide :显示下一幅图片。
- pgwSlideshow.nextSlide();
previousSlide :显示前一幅图片。
- pgwSlideshow.previousSlide();
destroy :销毁轮播图对象。如果传入参数true,那么容器将只是被隐藏起来。
- pgwSlideshow.destroy();
reload :使用新的配置参数来重新加载轮播图插件。
- pgwSlideshow.reload({
- transitionEffect : 'fading',
- adaptiveDuration : 4000
- });
via:http://www.htmleaf.com/jQuery/Sl ... r/201504191707.html
【超酷响应式带缩略图的jQuery轮播图插件】相关文章
本文来源:https://www.51html5.com/a1534.html
﹝超酷响应式带缩略图的jQuery轮播图插件﹞相关内容
- jQuery自动裁切图像产生缩略图Fakecrop
- jQuery超酷轻量级响应式lightbox插件
- 适合网友学习的Jquery图片轮播插件
- jQuery全屏图片轮播插件fullpage.js
- 响应式布局的设计方法和响应式前端优化干货
- 宽屏可左右切换的jQuery焦点图插件
- S Gallery – 很有特色的响应式 jQuery 相册插件
- S Gallery – 很有特色的响应式 jQuery 相册插件
- 7款很酷的JQuery动画和实用的JQuery应用
- Flexslider - 响应式的 jQuery 内容滚动插件