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

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

😂 这篇文章最后更新于1414天前,您需要注意相关的内容是否还可用。

osSlider--栅格切换效果插件

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

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

slider.jpg

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

【使用方法】

第一步:

写好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)