首页 > 网页特效 > jQuery幻灯 > 超酷jquery多图轮播幻灯代码 可全屏显示支持30种幻灯效果

超酷jquery多图轮播幻灯代码 可全屏显示支持30种幻灯效果

时间:2012-04-07    来源:互联网

基于jquery超级酷的多图轮播幻灯代码,支持多达30种不同的幻灯过渡效果,可设置全屏显示幻灯图,有多种不同的幻灯导航样式选择,超多选项可自定义修改,代码整合很简单,支持HMTL和XML两种不同方式调用。

支持WordPress博客幻灯插件,压缩包内附有WordPress幻灯插件。

1.幻灯效果演示

2.整合代码示例

外部引用:

// Styles
<link href="css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />

// Scripts
<script src="js/jquery-1.5.2.min.js"></script>
<script src="js/jquery.skitter.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.animate-colors-min.js"></script>

JS代码设置:

$(function(){
    $('.box_skitter_large').skitter();
});

HTML调用示例:

<div class="box_skitter box_skitter_large">

    <ul>
        <li>
            <a href="http://www.5icool.org"><img src="images/01.jpg" class="block" /></a>

            <div class="label_text">
                <p>Label</p>
            </div>
        </li>
        <li>

            <a href="http://www.5icool.org"><img src="images/02.jpg" class="cube" /></a>
            <div class="label_text">
                <p>Label</p>

            </div>
        </li>
        <li>
            <a href="http://www.5icool.org"><img src="images/03.jpg" class="default" /></a>

            <div class="label_text">
                <p>Label</p>
            </div>
        </li>
    </ul>

</div>

XML调用示例:

<?xml version="1.0" encoding="utf-8"?>
<skitter>

    <slide>
        <link>#directionTop</link>
        <image type="directionTop">images/001.jpg</image>
        <label><![CDATA[<p>directionTop</p>]]></label>

    </slide>
    <slide>
        <link>#cubeSize</link>
        <image type="cubeSize">images/002.jpg</image>

        <label><![CDATA[<p>cubeSize</p>]]></label>
    </slide>
    <slide>
        <link>#paralell</link>

        <image type="paralell">images/003.jpg</image>
        <label><![CDATA[<p>paralell</p>]]></label>
    </slide>

</skitter>

特效推荐

热门特效