banner

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

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)

阅读: 4810
在同意共创许可协议(CC BY-NC-SA-4.0)的前提下,您可以转载本文。
橙色阳光
https://oss.so/article/60

相关阅读

留言评论

13条留言
访客
同一个页面不能出现两个?好像两个的1 2 3 4的class都是slider-nav的
橙色阳光
当初写这个插件的时候考虑不足,所以没考虑一个页面多个的情况
rabbit
你好 想问问osSlider跟SuperSlide冲突怎样解决 提示这样 Uncaught TypeError: Cannot read property 'find' of null
橙色阳光
没有混合在一起用过,具体要看使用的情况才知道什么问题。不过,你既然已经使用了SuperSlide,就没有必要用OsSlider了,两者混合肯定冲突
小天
大神,请教这个如何在图片上做链接?
橙色阳光
直接给图片用a标签包裹上就可以了
访客
自适应宽度搞定了没有啊
橙色阳光
我能说……没有么……主要没时间写
酷寒似暑
CSS里面“.osSlider-main .slider-btn-prev” 和“ .osSlider-main .slider-btn-next”加上“cursor: pointer;”感觉好点。
橙色阳光
嗯,从用户体验的考虑上,这是我应该添加上去的
oss.so
阳光大神,终于写博客了!能不能一天一篇
橙色阳光
一天写一篇……好累人的,只能说争取多发博客
天兴工作室
请收下我的膝盖.....