图片轮播控件 skitter 功能非常的强大,考虑了很多常用的需求,可以配置成自己想要的模样。但使用过程中要注意:
1、jQuery 版本依赖
不要使用 3.x 版本的 jQuery,要使用 1.x 版本的 jQuery,比如 1.6.3 就是能用的版本。
不知道 skitter 是否后来有更新,我使用的这个是 2013 年之后就没更新了,不过功能非常强大,所以使用的 jQuery 是老的。
2、缩放图片
轮播切换时的很多特效,是将图片放在很多小 div 中,依次轮换显示实现的。每个小 div 只显示一图片一小部分。
如果我们的图片大小刚好和图片轮播控件一样大,那就没问题,正常显示,但是如果我们的图片比轮播控件大,它是不会实现自动缩小的,需要我们写 CSS,推荐使用动态的 JS 代码写入:
var style = $("<style type=\"text/css\">" + ".box_clone img { width:" + $(".box_skitter").width() + "px; }" + "</style>"); $("head").append(style);
3、配置说明
如下配置,控制是否显示标题、是否显示缩略图、是否显示1234数字导航、是否显示左右箭头导航。
$('.box_skitter').skitter({ label: false, thumbs: false, numbers: false, navigation: false, with_animations: ["cube", "cubeRandom", "block", "cubeStop", "cubeHide" ] });