注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

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

媒体 fishcity 2850浏览

垂直滑块幻灯片插件

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');

    });
});

转载请注明:jQ酷 » 垂直滑块幻灯片插件Vertical jQuery Carousel

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。