TAB垂直滚动图片切换

来源:https://www.sucaihuo.com/js/1390.html 2017-02-20 13:01浏览(1050) 收藏

点击左侧对应选项,右侧框中切换对应的图文。点击上下箭头可滚动菜单。
TAB垂直滚动图片切换
查看演示 下载资源 下载积分: 20 积分
<a href="javascript:void(0);" class="udbtn uPrev">上一个</a>
<div class="tabTagBox">
    <ul class="tabTagList">
        <li id="tag01" class="current">服装行业</li>
        <li id="tag02">旅游行业</li>
        <li id="tag03">房地产行业</li>
        <li id="tag04">教育培训</li>
        <li id="tag05">汽车用品</li>
        <li id="tag06">电子产品</li>
        <li id="tag07">律所行业</li>
        <li id="tag08">管理咨询</li>
        <li id="tag09">服装行业</li>
        <li id="tag10">酒店行业</li>
    </ul>
</div>
<a href="javascript:void(0);" class="udbtn dNext">下一个</a>

选项卡与延迟插件结合

$(function() {
    $("img[original]").lazyload({placeholder: ""});
});

function lazyloadForPart(container) {
    container.find('img').each(function() {
        var original = $(this).attr("original");
        if (original) {
            $(this).attr('src', original).removeAttr('original');
        }
    });
}

$(function() {

    var navBox = $('.tabTagBox'), navList = $('.tabTagList'), navs = navList.children('li'), upBtn = $('.uPrev'), downBtn = $('.dNext'), contentBoxs = $('.tabcon');

    var opts = {
        moveH: 58,
        moveSpeed: 200,
        curMoveH: 0,
        curSumH: 0,
        curNavIndex: 0
    }

    opts.curSumH = (opts.moveH * navs.size()) - navBox.height();

    var navToContentBox = function() {
        navs.removeClass('current');
        contentBoxs.hide().eq(opts.curNavIndex).show();
    }

    var navMove = function() {

        var _arg = arguments.length > 0 ? arguments[0] : '';

        if (_arg === 'up') {
            if (-opts.curSumH === opts.curMoveH) {
                alert('温馨提示:其他行业敬请期待!');
                return;
            }
            opts.curMoveH -= opts.moveH;
            opts.curNavIndex += 1;
        }

        if (_arg === 'down') {
            if (opts.curMoveH === 0) {
                alert('温馨提示:其他行业敬请期待!');
                return;
            }
            opts.curMoveH += opts.moveH;
            opts.curNavIndex -= 1;
        }

        navToContentBox();
        navs.eq(opts.curNavIndex).addClass('current');
        navList.animate({top: opts.curMoveH + 'px'}, opts.moveSpeed);
        lazyloadForPart(contentBoxs);
    }

    upBtn.click(function() {
        navMove('down');
    });

    downBtn.click(function() {
        navMove('up');
    });

    navs.click(function() {
        opts.curNavIndex = $(this).index();
        navToContentBox();
        $(this).addClass('current');
        lazyloadForPart(contentBoxs);
    });

});
标签: 垂直tab选项卡
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2