最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

BoxSlider演示3种滚动内容方式

来源:http://www.erdangjiade.com/ 沐浴春风 2015-08-21 05:48浏览(1535)

bxSlider可以实现 Slider 和滚动效果。这个插件使用非常简单,并且大小只有 8kb,非常轻量级,所以非常适合在站点和博客中使用。

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

分类:图片代码 > 图片滚动 难易:中级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

HTML

<div class="box-slider" id="erdangjiade">
    <a href="#" class="box-slider-seta-up"></a>
    <div class="box-slider-content">
        <div class="box-slider-move">
            <div class="item"><span></span></div>
            <div class="item"><span></span></div>
            ......
            <div class="item last-item"><span></span></div>
        </div>
    </div>
    <a href="#" class="box-slider-seta-down"></a>
</div>

引入jquery库和boxSlider插件

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-boxSlider.js"></script>

演示一:垂直/竖向

$(function() {
    $('#erdangjiade').boxSlider({
        orientation: 'vertical',
    });
});

演示一:水平/横向

$(function() { $("#erdangjiade").boxSlider({ orientation: 'horizontal', speed: 3 }); });

演示三:回调函数

$(function() {
    $("#erdangjiade").boxSlider({
        orientation: 'horizontal',
        speed: 3,
        added: function() {
            alert('初始化完成')
        }
    });
});
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/363.html
评论1
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 沙发
    01-15 08:41
    ngu137
    功能都不错,认真学习下啦
1 2