幻灯片/轮播

百叶窗过渡效果jQuery幻灯片插件

阿里云

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

使用方法:

使用该幻灯片插件需要在页面中引入 jQuery(1.8+)和 osSlider.css 以及 osSlider.js 文件。

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" href="css/osSlider.css" />
  2. <script src="js/jquery.min.js"></script>
  3. <script src="js/osSlider.js"></script>

HTML 结构:

该幻灯片的基本 HTML 结构是使用一个[div]容器来包裹一个无序列表。无序列表中每一项是一个幻灯片 slide。

  1. <div class="slider">
  2.   <ul class="slider-main">
  3.     <li>
  4.       <img src="1.jpg" alt="">
  5.     </li>
  6.     <li>
  7.       <img src="2.jpg" alt="">
  8.     </li>
  9.     <li>
  10.       <img src="3.jpg" alt="">
  11.     </li>
  12.     <li>
  13.       <img src="4.jpg" alt="">
  14.     </li>
  15.   </ul>
  16. </div>

初始化插件:

该幻灯片插件采用构造函数编写,使用时需要实例化。

  1. var slider = new osSlider({
  2.     pNode:'.slider',
  3.     cNode:'.slider-main li',
  4.     speed:3000,
  5.     autoPlay:true
  6. });

配置参数:

pNode:轮播容器选择器,必填

cNode:轮播体的选择器,必填

speed:动画速度,默认值 3000,选填

autoPlay:是否自动播放,默认值为 true

注意事项:该幻灯片插件 class 选择器已有 .osSlider-main, .slider-btn, .slider-btn-prev, .slider-btn-next, .slider-nav 请勿冲突。该版本不具备响应式功能。轮播的导航(.slider-nav)与切换按钮(.slider-btn)由插件自动生成

百叶窗过渡效果 jQuery 幻灯片插件

已有 340 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(1)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!