jQueryt+slideBox演示4种图片轮播效果

本文演示了左右轮播、上下轮播、左右轮播和隐藏底栏四种不同的幻灯片效果。

淘建站为您提供更多_图片代码_图片轮播_轮播_焦点图，在此特别感谢您对我们的支持与厚爱！

左右轮播，滚动持续0.6秒，滚动延迟3秒，滚动效果swing，初始焦点第1张，点选按键自动隐藏，按键边框半径（IE8-只方不圆）5px（以上各项为默认设置值）

<div id="demo1" class="slideBox">
    <ul class="items">
        <li>
            <a href="http://www.sucaiq.com/" title="这里是测试标题一">
                <img src="images/1.jpg">
            </a>
        </li>
        <li>
            <a href="http://www.sucaiq.com/" title="这里是测试标题二">
                <img src="images/2.jpg">
            </a>
        </li>
        <li>
            <a href="http://www.sucaiq.com/" title="这里是测试标题三">
                <img src="images/3.jpg">
            </a>
        </li>
        <li>
            <a href="http://www.sucaiq.com/" title="这里是测试标题四">
                <img src="images/4.jpg">
            </a>
        </li>
        <li>
            <a href="http://www.sucaiq.com/" title="这里是测试标题五">
                <img src="images/5.jpg">
            </a>
        </li>
    </ul>
</div>

上下轮播，滚动持续0.3秒，滚动延迟5秒，滚动效果linear，初始焦点第2张，点选按键自动隐藏

<div id="demo2" class="slideBox">
    <ul class="items">
        <li>
            <a href="http://www.sucaiq.com/" title="这里是测试标题一">
                <img src="images/1.jpg">
            </a>
        </li>
        <li>
            <a href="http://www.sucaiq.com/" title="这里是测试标题二">
                <img src="images/2.jpg">
            </a>
        </li>
        <li>
            <a href="http://www.sucaiq.com/" title="这里是测试标题三">
                <img src="images/3.jpg">
            </a>
        </li>
        <li>
            <a href="http://www.sucaiq.com/" title="这里是测试标题四">
                <img src="images/4.jpg">
            </a>
        </li>
        <li>
            <a href="http://www.sucaiq.com/" title="这里是测试标题五">
                <img src="images/5.jpg">
            </a>
        </li>
    </ul>
</div>

左右轮播，滚动持续0.3秒，滚动延迟5秒，滚动效果linear，初始焦点第1张，点选按键不隐藏，按键边框半径10px（圆形）

<div id="demo3" class="slideBox">
    <ul class="items">
        <li>
            <a href="http://www.sucaiq.com/" title="这里是测试标题一">
                <img src="images/1.jpg">
            </a>
        </li>
        <li>
            <a href="http://www.sucaiq.com/" title="这里是测试标题二">
                <img src="images/2.jpg">
            </a>
        </li>
        <li>
            <a href="http://www.sucaiq.com/" title="这里是测试标题三">
                <img src="images/3.jpg">
            </a>
        </li>
        <li>
            <a href="http://www.sucaiq.com/" title="这里是测试标题四">
                <img src="images/4.jpg">
            </a>
        </li>
        <li>
            <a href="http://www.sucaiq.com/" title="这里是测试标题五">
                <img src="images/5.jpg">
            </a>
        </li>
    </ul>
</div>

隐藏底栏

<div id="demo4" class="slideBox">
    <ul class="items">
        <li>
            <a href="http://www.sucaiq.com/" title="这里是测试标题一">
                <img src="images/1.jpg">
            </a>
        </li>
        <li>
            <a href="http://www.sucaiq.com/" title="这里是测试标题二">
                <img src="images/2.jpg">
            </a>
        </li>
        <li>
            <a href="http://www.sucaiq.com/" title="这里是测试标题三">
                <img src="images/3.jpg">
            </a>
        </li>
        <li>
            <a href="http://www.sucaiq.com/" title="这里是测试标题四">
                <img src="images/4.jpg">
            </a>
        </li>
        <li>
            <a href="http://www.sucaiq.com/" title="这里是测试标题五">
                <img src="images/5.jpg">
            </a>
        </li>
    </ul>
</div>

引入jQuery和slideBox相关组件

<link href="css/jquery.slideBox.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/jquery.slideBox.js" type="text/javascript"></script>

jQuery(function($) {
    $('#demo1').slideBox();
    $('#demo2').slideBox({
        direction: 'top',
        //left,top#方向
        duration: 0.3,
        //滚动持续时间，单位：秒
        easing: 'linear',
        //swing,linear//滚动特效
        delay: 5,
        //滚动延迟时间，单位：秒
        startIndex: 1 //初始焦点顺序
    });
    $('#demo3').slideBox({
        duration: 0.3,
        //滚动持续时间，单位：秒
        easing: 'linear',
        //swing,linear//滚动特效
        delay: 5,
        //滚动延迟时间，单位：秒
        hideClickBar: false,
        //不自动隐藏点选按键
        clickBarRadius: 10
    });
    $('#demo4').slideBox({
        hideBottomBar: true //隐藏底栏
    });
});