幻灯片/轮播
基于animate响应式jQuery轮播图插件
PetitQ
jcSlider 是一款基于 animate.css 的响应式 jQuery 轮播图插件。处于性能考虑，该轮播图插件没有使用 jQuery animations，仅使用 CSS3 动画。它不需要计算图片的运动距离，尺寸等，只需要在相应的元素上添加或删除相应的 class。它的特点有：
只有一个 js 文件
也想出现在这里？联系我们吧
压缩版本小于 1KB
响应式设计
可以使用超过 60 种不同的效果
动画元素可以是图片或文字，或任何你想动画的 HTML 元素
使用方法:
在页面中引入 jQuery，jquery.jcslider.js 和 animate.min.css 文件。
<script src="js/jquery.min.js"></script>
<!-- Slider Javascript file -->
<script src="js/jquery.jcslider.js"></script>
<!-- animate CSS stylesheet library -->
<link rel="stylesheet" href="css/animate.min.css">
HTML 结构:
该轮播图的 HTML 结构使用一个无序列表，每个
<ul class="jc-slider">
<li class="jc-animation">
[...]
</li>
<li class="jc-animation">
[...]
</li>
</ul>
初始化插件:
在页面 DOM 元素加载完成之后，可以通过下面的方法来初始化该轮播图插件。
$(document).ready(function(){
$('.jc-slider').jcSlider();
});
或者在初始化时传入参数：
$(document).ready(function(){
$('.jc-slider').jcSlider({
animationIn: "bounceInRight",
animationOut: "bounceOutLeft",
stopOnHover: false // 默认值为true
});
});
所有可用的效果是 animate.css 中的 66 种效果。
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
