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

来源:https://www.sucaihuo.com/js/314.html 2015-08-20 08:21浏览(2878) 收藏

本文演示了左右轮播、上下轮播、左右轮播和隐藏底栏四种不同的幻灯片效果。
jQueryt+slideBox演示4种图片轮播效果
分类:图片代码 > 图片轮播 难易:初级
查看演示 下载资源 下载积分: 20 积分

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

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

隐藏底栏

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

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2