[代码样式]Blindify – jQuery百叶窗幻灯片插件

[代码样式]Blindify – jQuery百叶窗幻灯片插件

简介

Blindify 是一个基于 jQuery 的百叶窗幻灯片插件,它能够非常方便的制作一个漂亮的百叶窗效果,你还可以设置百叶窗的片数、间隔、宽度、高度以及各种动画效果的时间和百叶窗的方向——水平或垂直。

兼容

jQuery 兼容

兼容 1.4+。

浏览器兼容

[代码样式]Blindify – jQuery百叶窗幻灯片插件 [代码样式]Blindify – jQuery百叶窗幻灯片插件 [代码样式]Blindify – jQuery百叶窗幻灯片插件 [代码样式]Blindify – jQuery百叶窗幻灯片插件 [代码样式]Blindify – jQuery百叶窗幻灯片插件
IE9+ ✔ Chrome ✔ Firefox ✔ Opera ✔ Safari ✔

使用方法

1、引入文件

<link rel="stylesheet" href="https://www.dowebok.com/css/blindify.min.css">
<script src="https://www.dowebok.com/js/jquery-1.8.3.min.js"></script>
<script src="https://www.dowebok.com/js/jquery.blindify.min.js"></script>

2、HTML

<div id="blindify">
    <ul>
        <li><img src="https://www.dowebok.com/images/photo_1.jpg" alt=""></li>
        <li><img src="https://www.dowebok.com/images/photo_2.jpg" alt=""></li>
        <li><img src="https://www.dowebok.com/images/photo_3.jpg" alt=""></li>
        <li><img src="https://www.dowebok.com/images/photo_4.jpg" alt=""></li>
    </ul>
</div>

或者带有链接:

<div id="blindify">
    <ul>
        <li><a href="https://www.dowebok.com/"><img src="https://www.dowebok.com/images/photo_1.jpg" alt=""></a></li>
        <li><a href="https://www.dowebok.com/"><img src="https://www.dowebok.com/images/photo_2.jpg" alt=""></a></li>
        <li><a href="https://www.dowebok.com/"><img src="https://www.dowebok.com/images/photo_3.jpg" alt=""></a></li>
        <li><a href="https://www.dowebok.com/"><img src="https://www.dowebok.com/images/photo_4.jpg" alt=""></a></li>
    </ul>
</div>

3、JavaScript

$(function(){
    $('#blindify').blindify();
});

配置

属性/方法 类型 默认值 说明
numberOfBlinds 整数 20 百叶窗叶片个数
slideVisibleTime 整数 2000 每个幻灯片的停留时间,不包括动画时间,以毫秒为单位
color 字符串 #000000 幻灯片背景颜色(十六进制颜色)
margin 整数 2 百叶窗之间的距离,以像素(px)为单位。注意:其实是每个百叶窗的边框,所以如果想设置距离为10px,只需设置一半5px
width 整数 960 容器的宽度,应与图片的宽度一样,以像素为单位
height 整数 600 容器的高度,应与图片的宽度一样,以像素为单位
gap 整数 100 百叶窗与容器边缘的距离范围,以像素为单位
animationSpeed 整数 100 幻灯片动画过度时间
delayBetweenSlides 整数 500 每个幻灯片切换之间的间隔,以毫秒为单位
hasLinks 布尔值 false 是否有链接
orientation 字符串 vertical 百叶窗的方向,可选水平(horizontal)或垂直(vertical),默认为垂直
startClosed 布尔值 false 百叶窗开始时是否关闭
firstOpenDelay 整数 500 startClosed 为 true 时,百叶窗延迟打开时间,单位为毫秒
隐藏内容,您需要满足以下条件方可查看
End

人已赞赏
脚本代码

[代码样式]baguetteBox.js – 纯JS lightbox库

2020-10-30 10:19:32

脚本代码

[代码样式]简单的jQuery导航菜单固定插件smint

2020-11-6 9:51:17

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索