TAB垂直滚动图片切换

TAB垂直滚动图片切换

添加时间:2021-03-12 16:01:44
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:选项卡切换
  • 模板颜色模板颜色:中级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

点击左侧对应选项,右侧框中切换对应的图文。点击上下箭头可滚动菜单。
TAB垂直滚动图片切换
分类:选项卡/滑动门 > 选项卡切换 难易:中级
<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垂直滚动图片切换

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.184684s