基于jquery的焦点幻灯轮换代码,具有百叶窗和淡入淡出幻灯特效,有多种不同的幻灯图浏览控制方式,你还可以设置百叶窗的片数、间隔、宽度、高度以及各种动画效果的时间和百叶窗的方向——水平或垂直。
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 |
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791