带各种百叶窗过渡效果的jQuery幻灯片插件

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > 带各种百叶窗过渡效果的jQuery幻灯片插件
带各种百叶窗过渡效果的jQuery幻灯片插件
分享:

    插件介绍

    osSlider是一款简单实用的带各种百叶窗过渡效果的jQuery幻灯片插件。该幻灯片插件在slide过渡时随机生成各种百叶窗效果,它使用简单,通过简单的设置即可正常工作。

    浏览器兼容性

    浏览器兼容性
    时间:09-01
    阅读:
简要教程

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