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

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线充值

分类：图片代码 > 图片轮播难易：初级

查看演示

加我微信，拉你进VIP群学习：

下载资源下载积分： 30 积分

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

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

隐藏底栏

<div id="demo4" class="slideBox">
    <ul class="items">
        <li>
            <a href="http://www.erdangjiade.com/" title="这里是测试标题一">
                <img src="images/1.jpg">
            </a>
        </li>
        <li>
            <a href="http://www.erdangjiade.com/" title="这里是测试标题二">
                <img src="images/2.jpg">
            </a>
        </li>
        <li>
            <a href="http://www.erdangjiade.com/" title="这里是测试标题三">
                <img src="images/3.jpg">
            </a>
        </li>
        <li>
            <a href="http://www.erdangjiade.com/" title="这里是测试标题四">
                <img src="images/4.jpg">
            </a>
        </li>
        <li>
            <a href="http://www.erdangjiade.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 //隐藏底栏
    });
});

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

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