Skidder是一款响应式无限轮播的jQuery旋转木马插件。它可以自动将图片居中对齐,组成首尾相接的一组图片,通过导航按钮或移动触摸滑动来前后切换图片。它的特点还有:
- 图片自动居中对齐。
- 无限循环轮播。
- 响应式设计,图片自动适应窗口大小。
- 可以在移动设备上触摸滑动。
- 兼容IE8+的IE浏览器。
使用方法
使用该旋转木马插件需要在页面中引入jquery.skidder.css和jquery,以及jquery.skidder.js文件。
<link rel="stylesheet" href="path/to/jquery.skidder.css"> <script src="path/to/jquery.skidder.js"></script> <script src="path/to/jquery.skidder.js"></script>
HTML结构
该旋转木马的基本HTML结构如下:
<div class="slideshow" style="display: none;"> <div class="slide"><img src="1.jpg"></div> <div class="slide"><img src="2.jpg"></div> <div class="slide"><img src="3.jpg"></div> </div>
初始化插件
在页面DOM元素加载完毕之后,通过skidder()
方法来初始化该旋转木马插件。
$('.slideshow').skidder();
要确保图片在插件初始化之前就被全部加载,否则不能正确的计算图片的高度。可以使用imagesloaded.js来完成这项工作。
$('.slideshow').each( function() { var $slideshow = $(this); $slideshow.imagesLoaded( function() { $slideshow.skidder(); }); });
要动态改变图片的尺寸大小,插件中使用了第三方的smartresize:
$(window).smartresize(function(){ $('.slideshow').skidder('resize'); });
配置参数
Skidder旋转木马插件的配置参数如下:
参数 | 描述 |
slideClass | slide元素的class名称。默认为".slide" |
animationType | 该插件支持CSS动画和jQuery动画。可选值为: 'animate', 'css'。默认值为 'animate' |
lazyLoad | 懒加载,默认值为false |
lazyLoadAutoInit | 默认值为true |
lazyLoadWindow | 默认值为1 |
scaleSlides | 是否根据maxWidth, maxHeight和scaleTo参数缩放slide为统一的值。默认为true。 |
scaleTo | 定义缩放模式。有2种模式:最小模式和响应式模式。可选值为:"smallest"和[x, y]。"smallest"表示高度最小的图片绝对幻灯片的高度。[x, y]表示使用一个数组中的两个数值来定义幻灯片的比例。默认为"smallest"模式。 |
maxWidth | 现在幻灯片的最大宽度,0或"none"表示不限制。默认为800 |
maxHeight | 现在幻灯片的最大高度,0或"none"表示不限制。默认为500 |
preservePortrait | 在响应式模式中该参数有效。决定小于比例的图片的填充模式。true表示适应视口高度,水平方向上留空白。默认为false。 |
paging | 设置为true时,插件会查找pagingElement元素的包裹元素pagingWrapper来设置padding。如果这两个元素不存在,插件会自动创建它们。默认为true。 |
pagingWrapper | 分页圆点的包裹元素,默认为'.skidder-pager' |
pagingElement | 分页圆点元素,默认为'.skidder-pager-dot' |
swiping | 是否在移动触摸设备上允许swiping。默认为true |
leftaligned | 如果不希望幻灯片居中,设置为true,默认为false |
cycle | 是否循环显示,默认为true。 |
jumpback | 在非循环模式时,最后一张幻灯片会显示'return to first slide'箭头。默认为false |
speed | 过渡动画的速度,默认为400 |
autoplay | 是否总播放,默认为false |
autoplayResume | 是否在互动后恢复自动播放,默认为false |
interval | 自动播放的时间间隔,默认为4000 |
transition | 过渡动画效果,'slide' 或 'fade' |
directionClasses | 在过渡动画结束后为slides添加 'left-from-active' 和 'right-from-active' class类。 |
afterSliding | 旋转木马改变后的回调函数 |
afterInit | 旋转木马初始化后的回调函数 |
afterResize | 旋转木马尺寸改变时的回调函数 |
skidder旋转木马插件的github地址为:https://github.com/null2/skidder
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!