Blindify演示7中不同的百叶窗效果

来源:https://www.sucaihuo.com/js/196.html 2015-06-15 07:03浏览(771) 收藏

基于jquery的焦点幻灯轮换代码,具有百叶窗和淡入淡出幻灯特效,有多种不同的幻灯图浏览控制方式,你还可以设置百叶窗的片数、间隔、宽度、高度以及各种动画效果的时间和百叶窗的方向——水平或垂直。
Blindify演示7中不同的百叶窗效果
分类:图片代码 > 图片插件 难易:中级
查看演示 下载资源 下载积分: 20 积分

HTML

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

引入jQuery库和blindify相关插件:

<link rel="stylesheet" href="css/blindify.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.blindify.min.js"></script>

调用blindify非常简单

$(function(){
    $('#blindify').blindify();
});
参数 描述 默认值
numberOfBlinds 百叶窗叶片个数 20
slideVisibleTime 每个幻灯片的停留时间,不包括动画时间,以毫秒为单位 2000
color 幻灯片背景颜色(十六进制颜色) #000000
margin 百叶窗之间的距离,以像素(px)为单位。注意:其实是每个百叶窗的边框,所以如果想设置距离为10px,只需设置一半5px 2
width 容器的宽度,应与图片的宽度一样,以像素为单位 960
height 容器的高度,应与图片的宽度一样,以像素为单位 600
gap 百叶窗与容器边缘的距离范围,以像素为单位 100
animationSpeed 幻灯片动画过度时间 100
delayBetweenSlides 每个幻灯片切换之间的间隔,以毫秒为单位 500
hasLinks 是否有链接 false
orientation 百叶窗的方向,可选水平(horizontal)或垂直(vertical),默认为垂直 vertical
startClosed 百叶窗开始时是否关闭 false
firstOpenDelay startClosed 为 true 时,百叶窗延迟打开时间,单位为毫秒 500
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2