jcSlider是一款效果非常炫酷的支持多种动画特效的响应式jQuery幻灯片插件。该幻灯片插件的文件体积效果，支持各种HTML元素，并且可以使用内置的60多种CSS3动画效果来制作幻灯片的过渡动画。

在线预览 下载

它的特点还有：

• 只有一个js文件
• js文件压缩后只有1kb大小
• 响应式设计
• 支持超过60种CSS3动画效果
• 支持各种HTML元素：文本，图片等等

使用方法

在页面中引入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