jcSlider是一款效果非常炫酷的支持多种动画特效的响应式jQuery幻灯片插件。该幻灯片插件的文件体积效果，支持各种HTML元素，并且可以使用内置的60多种CSS3动画效果来制作幻灯片的过渡动画。它的特点还有：
- 只有一个js文件
- js文件压缩后只有1kb大小
- 响应式设计
- 支持超过60种CSS3动画效果
- 支持各种HTML元素：文本，图片等等
安装
你可以使用bower或npm来安装该幻灯片插件。
bower install jcslider --save npm install jcslider --save |
使用方法
在页面中引入jQuery和jquery.jcslider.min.js以及animate.min.css文件。
<script src="js/jquery.min.js"></script><script src="jquery.jcslider.min.js"></script><!-- animate CSS stylesheet library --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.min.css"> |
HTML结构
该幻灯片的基本HTML结构如下：
<ul class="jc-slider"> <li class="jc-animation"> [...] </li> <li class="jc-animation"> [...] </li></ul> |
初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该幻灯片插件。
<script type="text/javascript"> $(document).ready(function(){ $('.jc-slider').jcSlider(); });</script> |
或者在初始化时配置一些自定义参数：
<script type="text/javascript"> $(document).ready(function(){ $('.jc-slider').jcSlider({ animationIn : "bounceInRight", animationOut : "bounceOutLeft", stopOnHover : false, // 默认值为true loop : false // 默认值为true }); });</script> |
可用的CSS3动画效果
| bounce | flash | pulse | rubberBand |
| shake | swing | tada | wobble |
| jello | bounceIn | bounceInDown | bounceInLeft |
| bounceInRight | bounceInUp | bounceOut | bounceOutDown |
| bounceOutLeft | bounceOutRight | bounceOutUp | fadeIn |
| fadeInDown | fadeInDownBig | fadeInLeft | fadeInLeftBig |
| fadeInRight | fadeInRightBig | fadeInUp | fadeInUpBig |
| fadeOut | fadeOutDown | fadeOutDownBig | fadeOutLeft |
| fadeOutLeftBig | fadeOutRight | fadeOutRightBig | fadeOutUp |
| fadeOutUpBig | flipInX | flipInY | flipOutX |
| flipOutY | lightSpeedIn | lightSpeedOut | rotateIn |
| rotateInDownLeft | rotateInDownRight | rotateInUpLeft | rotateInUpRight |
| rotateOut | rotateOutDownLeft | rotateOutDownRight | rotateOutUpLeft |
| rotateOutUpRight | hinge | rollIn | rollOut |
| zoomIn | zoomInDown | zoomInLeft | zoomInRight |
| zoomInUp | zoomOut | zoomOutDown | zoomOutLeft |
| zoomOutRight | zoomOutUp | slideInDown | slideInLeft |
| slideInRight | slideInUp | slideOutDown | slideOutLeft |
| slideOutRight | slideOutUp |
