jQuery和CSS3响应式内容轮播插件jcSlider

页面的head部分，需引入2个本地CSS文件，并远程调用1个CSS样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/styles.css">
<link type="text/css" rel="stylesheet" href="css/jcslider.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.3.0/animate.min.css">

页面的body部分，不同的展示效果分别放入ul标签里面，代码如下：

<main>
	<section class="example">
	    <h2>示例 1</h2>
	    <!-- Slider start -->
	    <ul class="jc-slider">
	        <li class="jc-animation">
	            <div class="wrap">
	                这是一个很有意思的过程，就好比把宇宙当成一本货物的目录，你翻着它，然后决定“我要经历这个，我要那种东西，我要跟那种人一起生活”，你就是那个跟宇宙下订单的人。其实就是这样简单。
	            </div>
	        </li>
	        <li class="jc-animation">
	            <div class="wrap">
	                大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”
	            </div>
	        </li>
	        <li class="jc-animation">
	            <div class="wrap">
	                当你感觉好的时候，你就是把自己和你要的事物放在同一个频率上。尝试去做一切你能做的事，帮助自己具有拥有它们的感觉。无论你能做什么，只要去做，就有助于把这些东西吸引过来。
	            </div>
	        </li>
	    </ul>
	    <!-- Slider end -->
	    <h2>示例 2</h2>
	    <!-- Slider start -->
	    <ul class="jc-slider2">
	        <li class="jc-animation">
	            <img src="img/1.jpg" alt="1">
	        </li>
	        <li class="jc-animation">
	            <img src="img/2.jpg" alt="2">
	        </li>
	        <li class="jc-animation">
	            <img src="img/3.jpg" alt="3">
	        </li>
	    </ul>
	    <!-- Slider end -->
	    <h2>示例 3</h2>
	    <!-- Slider start -->
	    <ul class="jc-slider3">
	        <li class="jc-animation">
	            <img src="img/4.jpg" alt="1">
	        </li>
	        <li class="jc-animation">
	            <img src="img/5.jpg" alt="2">
	        </li>
	        <li class="jc-animation">
	            <img src="img/6.jpg" alt="3">
	        </li>
	    </ul>
	    <!-- Slider end -->
	    <h2>示例 4</h2>
	    <!-- Slider start -->
	    <ul class="jc-slider4">
	        <li class="jc-animation">
	            <img src="img/7.jpg" alt="1">
	        </li>
	        <li class="jc-animation">
	            <img src="img/8.jpg" alt="2">
	        </li>
	        <li class="jc-animation">
	            <img src="img/9.jpg" alt="3">
	        </li>
	    </ul>
	    <!-- Slider end -->
	</section>
</main>

页面的底部，需引入jQuery库和jcslider插件，并启用插件设置好参数，代码如下：

<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jcslider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.jc-slider').jcSlider({
        animationIn: 'bounceInRight',
        animationOut: 'bounceOutLeft',
        stopOnHover: false
    });

    $('.jc-slider2').jcSlider({
        animationIn: 'zoomInUp',
        animationOut: 'flipOutX',
        stopOnHover: false
    });
    $('.jc-slider3').jcSlider({
        animationIn: 'flipInX',
        animationOut: 'shake',
        stopOnHover: false
    });
    $('.jc-slider4').jcSlider({
        animationIn: 'zoomIn',
        animationOut: 'zoomOut',
        stopOnHover: false
    });
});
</script>