图片轮播(切换特效)控件 skitter 使用注意事项

作者:vkvi 来源:ITPOW(原创) 日期:2020-11-27

图片轮播控件 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" ]
});

更多可参考:https://www.jq22.com/jquery-info20

相关文章