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 |