幻灯片/轮播

百叶窗效果jQuery幻灯片插件

阿里云


Blindify 是一个能使幻灯片切换效果像百叶窗一样的 jQuery 插件。可以设置为水平切换或垂直切换。

引入必要的 js 文件和 css 文件

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" href="blindify.css" media="all" />
  2. <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
  3. <script type="text/javascript" src="jquery.blindify.js"></script>

HTML 结构:

  1. <div id="blindify">
  2.     <ul>
  3.         <li><img src="photo_1.jpg" alt="" /></li>
  4.         <li><img src="photo_2.jpg" alt="" /></li>
  5.         <li><img src="photo_3.jpg" alt="" /></li>
  6.         <li><img src="photo_4.jpg" alt="" /></li>
  7.     </ul>
  8. </div>

水平方向百叶窗效果的调用方法

  1. <script>
  2.     $(document).ready(function(){
  3.         $("#blindify").blindify({
  4.             numberOfBlinds: 8,
  5.             margin: 10,
  6.             gapHeight: 140,
  7.             orientation: "horizontal"
  8.         });
  9.     });
  10. </script>

百叶窗效果 jQuery 幻灯片插件

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

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

发表回复

热销模板

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

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