html广告轮播插件,基于animate.css的响应式jQuery轮播图插件

jcSlider是一款基于animate.css的响应式jQuery轮播图插件。处于性能考虑，该轮播图插件没有使用jQuery animations，仅使用CSS3动画。它不需要计算图片的运动距离，尺寸等，只需要在相应的元素上添加或删除相应的class。它的特点有：

只有一个js文件。

压缩版本小于1KB。

响应式设计。

可以使用超过60种不同的效果。

动画元素可以是图片或文字，或任何你想动画的HTML元素。

安装

可以通过bower或npm来安装该轮播图插件。

bower install --save jcslider

npm install jcslider

或直接下载压缩包文件。在页面中引入jQuery，jquery.jcslider.js和animate.min.css文件。

使用方法

HTML结构

该轮播图的HTML结构使用一个无序列表，每个

元素是一个要动画的元素。

• [...]

• [...]

初始化插件

在页面DOM元素加载完成之后，可以通过下面的方法来初始化该轮播图插件。

$(document).ready(function(){

$('.jc-slider').jcSlider();

});

或者在初始化时传入参数：

$(document).ready(function(){

$('.jc-slider').jcSlider({

animationIn: "bounceInRight",

animationOut: "bounceOutLeft",

stopOnHover: false // 默认值为true

});

});

所有可用的效果是animate.css中的66种效果。