jQuery栅格效果轮播插件osSlider - 1.0

osSlider--栅格切换效果插件

插件总共有三种大效果，7种综合效果。没有左右切换，源文件有中文注释（毕竟是我原创的……）。

经测试，目前插件支持ie8+、chrome、firefox等常见浏览器。

第一个版本，插件是固定宽度，并未有做自适应调整，可能会放在后期修改过来。

【使用方法】

第一步：

写好html代码，层次逻辑 容器节点>轮播节点，这个可以参考我下面的demo

<div class="slider">
    <ul class="slider-main">
        <li>
            <img src="./images/1.jpg" alt="">
        </li>
        <li>
            <img src="./images/2.jpg" alt="">
        </li>
        <li>
            <img src="./images/3.jpg" alt="">
        </li>
        <li>
            <img src="./images/4.jpg" alt="">
        </li>
    </ul>
</div>

*这个不局限于 ul>li的结构

第二步：

引入osSlider.min.js(*压缩版)   jQ文件随意引用 推荐1.8.3

<script src="./script/jquery-1.8.0.js"></script>
<script src="./script/osSlider.min.js"></script>

第三步：

启用插件效果

<script type="text/javascript">
    var slider = new osSlider({
        pNode:'.slider', //容器节点的选择器 必填
        cNode:'.slider-main li', //轮播节点的选择器 必填
        speed:3000, //速度 默认3000 可不填写
        autoPlay:true //是否自动播放 默认true 可不填写
    });
</script>

Github项目地址         DEMO

插件中自带osSlider.css样式文件，其中对上下条切换和轮播焦点导航做了简单的样式处理，可以通过demo看到效果，如果不喜欢可以自己写，我把插件会自动生成的内容发布出来，有需要可以自定义修改。

上下条切换按钮

<ul class="slider-btn">
    <li class="slider-btn-prev">prev</li>
    <li class="slider-btn-next">next</li>
</ul>

轮播焦点导航（自动根据轮播节点数量生成），其中class="active"表示当前焦点所在位置

<ul class="slider-nav">
    <li class="active">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

如有修改意见，欢迎附加版本号，在该文下方留言！（当前版本号：v1.0）