jQuery百叶窗效果插件BLINDIFY

所属分类： JQ特效媒体幻灯片和轮播图

查看演示立即下载

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

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

要求

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>

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jquery.treeview.js树控件
下一个特效： jquery.gridnav网格图片列表排列布局鼠标按钮控制图片滚动翻页