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
)由插件自动生成