百叶窗效果的jQuery幻灯片插件

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > 百叶窗效果的jQuery幻灯片插件
百叶窗效果的jQuery幻灯片插件
分享:

    插件介绍

    blindify.js是一款非常不错的百叶窗效果的jQuery幻灯片插件。这个幻灯片插件在图片切换时能像百叶窗一样开启和关闭,百叶窗可以设置为垂直和水平两个方向。

    浏览器兼容性

    浏览器兼容性
    时间:2014-10-22
    阅读:

简要教程

Blindify是一个能使幻灯片切换效果像百叶窗一样的jQuery插件。可以设置为水平切换或垂直切换。

引入必要的js文件和css文件

<link rel="stylesheet" href="blindify.css" media="all" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.blindify.js"></script>             
                

HTML结构

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

水平方向百叶窗效果的调用方法

<script>
    $(document).ready(function(){
        $("#blindify").blindify({
            numberOfBlinds: 8,
            margin: 10,
            gapHeight: 140,
            orientation: "horizontal"
        });
    });
</script>              
                

更多信息:https://github.com/stathisg/blindify