BoxSlider演示3种滚动内容方式

收藏

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('初始化完成') 
        } 
    }); 
});