幻灯片/轮播
百叶窗过渡效果jQuery幻灯片插件
PetitQ
osSlider 是一款简单实用的带各种百叶窗过渡效果的 jQuery 幻灯片插件。该幻灯片插件在 slide 过渡时随机生成各种百叶窗效果，它使用简单，通过简单的设置即可正常工作。
使用方法:
使用该幻灯片插件需要在页面中引入 jQuery(1.8+)和 osSlider.css 以及 osSlider.js 文件。
也想出现在这里？联系我们吧
<link rel="stylesheet" href="css/osSlider.css" />
<script src="js/jquery.min.js"></script>
<script src="js/osSlider.js"></script>
HTML 结构:
该幻灯片的基本 HTML 结构是使用一个[div]容器来包裹一个无序列表。无序列表中每一项是一个幻灯片 slide。
<div class="slider">
<ul class="slider-main">
<li>
<img src="1.jpg" alt="">
</li>
<li>
<img src="2.jpg" alt="">
</li>
<li>
<img src="3.jpg" alt="">
</li>
<li>
<img src="4.jpg" alt="">
</li>
</ul>
</div>
初始化插件:
该幻灯片插件采用构造函数编写，使用时需要实例化。
var slider = new osSlider({
pNode:'.slider',
cNode:'.slider-main li',
speed:3000,
autoPlay:true
});
配置参数:
pNode：轮播容器选择器，必填
cNode：轮播体的选择器，必填
speed：动画速度，默认值 3000，选填
autoPlay：是否自动播放，默认值为 true
注意事项:该幻灯片插件 class 选择器已有 .osSlider-main， .slider-btn， .slider-btn-prev， .slider-btn-next， .slider-nav 请勿冲突。该版本不具备响应式功能。轮播的导航(.slider-nav)与切换按钮(.slider-btn)由插件自动生成
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
