jQuery百叶窗效果插件BLINDIFY

一个具有百叶窗效果,图像列表之间转换的幻灯片。

要求

jQuery 1.4 +

使用

首先，你必须包括blindify的CSS文件（或只是代码复制并粘贴到你自己的页面），包括一个版本的jQuery库和完全或简化版的blindify。比如:

<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>

之后，你需要一个图像列表，包在一个独特的ID。容器单元例：

<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>

你可以让整个幻灯片是一个链接到一个特定的页面，通过使用一个锚点元素的容器，例如：

<a href="#" 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>
</a>

如果你希望每个图像指向一个唯一的URL，你只需要指定一个选项在初始化插件，和格式化你的代码如下：

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

最后，应用blindify到您的HTML代码，你只需要初始化它并将它附加到元素作为容器，例如：

<script type="text/javascript">
    $(document).ready(function(){
        $('#blindify').blindify();
    });
</script>

您可以重写插件的默认选项，这样：

<script type="text/javascript">
    $(document).ready(function(){
        $('#blindify').blindify({
            numberOfBlinds: 10,
            animationSpeed: 600,
            delayBetweenSlides: 200
        });
    });
</script>

PREVIOUS:
NEXT:
jquery.gridnav网格图片列表排列布局鼠标按钮控制图片滚动翻页
jquery.treeview.js树控件