BoxSlider演示3种滚动内容方式_图片代码_图片滚动_滚动_垂直

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

淘建站为您提供更多_图片代码_图片滚动_滚动_垂直，在此特别感谢您对我们的支持与厚爱！

查看演示

演示不了，点击反馈

加入收藏

下载 423 次

打赏作者

觉得不错，可打赏下作者

下载资源

免费共享

特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。

举报/反馈

分类：图片代码 > 图片滚动难易程度：中级

HTML

<div class="box-slider" id="sucaiq">
    <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() {
    $('#sucaiq').boxSlider({
        orientation: 'vertical',
    });
});

演示一：水平/横向

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

演示三：回调函数

$(function() {
    $("#sucaiq").boxSlider({
        orientation: 'horizontal',
        speed: 3,
        added: function() {
            alert('初始化完成')
        }
    });
});