垂直滑块幻灯片插件Vertical jQuery Carousel

垂直滑块幻灯片插件

Vertical jQuery Carousel用一款依整于jquerybootstrap的垂直滑块幻灯片插件,使用bootstrap的布局,jquery easing实现缓冲与重力效果。使用本插件需要有一定的bootstrap基础。

jquery实例:Vertical jQuery Carousel使用

引入核心文件

    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/style.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.easing.js"></script>

构建html

<div class="col-xs-4 col-xs-offset-4 vertical-slider">
                <div class="slider-container">
                    <div class="slider-content">
                        <div class="slider-thumb">

                        </div>
                        <div class="slider-thumb">

                        </div>
                        <div class="slider-thumb">

                        </div>
                        <div class="slider-thumb">

                        </div>
                        <div class="slider-thumb">

                        </div>
                        <div class="slider-thumb">

                        </div>
                        <div class="slider-thumb">

                        </div>
                        <div class="slider-thumb">

                        </div>
                        <div class="slider-thumb">

                        </div>
                        <div class="slider-thumb">

                        </div>
                    </div>
                    <span class="slider-control slider-up" data-direction="up" style="display:none;"><i class="glyphicon glyphicon glyphicon-circle-arrow-up"></i></span>
                    <span class="slider-control slider-down" data-direction="down"><i class="glyphicon glyphicon glyphicon-circle-arrow-down"></i></span>
                </div>
            </div>

写入JS实现效果

$(window).load(function () {
    var content = $('.slider-content'),//取得容器对象
        containerHeight = $('.slider-container').height(),//容器对象高度
        contentHeight = $('.slider-content').height(),//内容高度
        maxHeight = contentHeight - containerHeight,//最大高度
        itemHeight = $('.slider-thumb').height();//每个item(如:图片)高度

    

    $('.slider-control').click(function () {//绑定单击事件
        var direction = $(this).data('direction'),//取得元素中的data属性值
            topPos = Math.round(content.position().top),//取得内容位置的高度
            scrollDist;

        if (direction === 'down') { //如果点击的是向下按钮
            scrollDist = topPos - itemHeight;//计算出需要滚动的高度
            $('.slider-up').fadeIn(200);//显示和上按钮
            if (scrollDist < -maxHeight) {//如果滚动的高度大于最大高度,把滚动值变为最大值
                scrollDist = -maxHeight;
                $('.slider-down').fadeOut(200); //向下滚动按钮隐藏
            }
        } else {
            if (topPos === 0 || Math.abs(topPos) < itemHeight) {如果当前内容的top等于0或是大于item高度
                scrollDist = 0; //滚动值设为0
                $('.slider-up').fadeOut(200); //向上按钮隐藏
            } else {//否则
                $('.slider-down').fadeIn(200);//向下按键显示
                scrollDist = topPos + itemHeight; //滚动高度等于当前内容的top加上item的高度
            }
        }

        content.animate({ 300毫秒top方向滚动scrollDist,之后淡出
            top: scrollDist
        }, 300, 'easeInOutBack');

    });
});

下载地址:本站下载 | 百度云 | 官方下载

Comments are closed.