
jQuery栅格效果轮播插件osSlider - 1.0
😂 这篇文章最后更新于1970天前,您需要注意相关的内容是否还可用。
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>
插件中自带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)