最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 沐浴春风 2015-06-15 07:03浏览(1472)

基于jquery的焦点幻灯轮换代码,具有百叶窗和淡入淡出幻灯特效,有多种不同的幻灯图浏览控制方式,你还可以设置百叶窗的片数、间隔、宽度、高度以及各种动画效果的时间和百叶窗的方向——水平或垂直。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

Blindify演示7中不同的百叶窗效果
分类:图片代码 > 图片插件 难易:中级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

HTML

引入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
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/196.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2