幻灯片/轮播
jcSlider - 响应式图片轮播jQuery插件
PetitQ
jcSlider 是一款 jquery 和 CSS3 响应式轮播图插件。jcSlider 使用 CSS3 过渡动画，它可以和 animate.css 完美结合，生成 60 多种轮播图过渡动画效果。
使用方法
在页面中引入 jquery 和 jquery.jcslider.min.js 文件，以及 animate.min.css 文件。
也想出现在这里？联系我们吧
<link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.3.0/animate.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.jcslider.min.js"></script>
HTML 结构
jcslider 轮播图的 HTML 结构如下：
<ul class="jc-slider">
<li class="jc-animation">
[...]
</li>
<li class="jc-animation">
[...]
</li>
</ul>
初始化插件
在页面 DOM 元素加载完毕之后，通过 jcSlider()方法来初始化该 jquery 轮播图插件。
<script type="text/javascript">
$(document).ready(function(){
$('.jc-slider').jcSlider();
});
</script>
jcSlider 轮播图插件的可用配置参数如下：
$(document).ready(function(){$('.jc-slider').jcSlider({animationIn : "bounceInRight",
animationOut : "bounceOutLeft",
stopOnHover : false, // true by default
loop : false // true by default
});
});
Github 网址：https://github.com/JoanClaret/jcSlider
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
