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

脚本代码
20年10月30日
编辑

简介

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

兼容

jQuery 兼容

兼容 1.4+。

浏览器兼容


IE9+ ✔	Chrome ✔	Firefox ✔	Opera ✔	Safari ✔

使用方法

1、引入文件

<link rel="stylesheet" href="https://www.dowebok.com/css/blindify.min.css" rel="external nofollow" >
<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/" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="https://www.dowebok.com/images/photo_1.jpg" alt=""></a></li>
        <li><a href="https://www.dowebok.com/" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="https://www.dowebok.com/images/photo_2.jpg" alt=""></a></li>
        <li><a href="https://www.dowebok.com/" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="https://www.dowebok.com/images/photo_3.jpg" alt=""></a></li>
        <li><a href="https://www.dowebok.com/" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><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 时，百叶窗延迟打开时间，单位为毫秒