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