基于jquery的焦点幻灯轮换代码,具有百叶窗和淡入淡出幻灯特效,有多种不同的幻灯图浏览控制方式,你还可以设置百叶窗的片数、间隔、宽度、高度以及各种动画效果的时间和百叶窗的方向——水平或垂直。
0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值
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 |
友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群