jquery左侧分类导航菜单和图片轮播滚动布局代码添加更多

最新推荐文章于 2022-08-22 09:05:19 发布
最新推荐文章于 2022-08-22 09:05:19 发布
阅读量1.4k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21082197/article/details/81206474
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>慕课</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/idangerous.swiper.css">
    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <link rel="stylesheet" href="css/index.css">
    <style>
        .hide {
    display: none;
}

.header-top {
    width: 100%;
    height: 30px;
    background-color: #2F3030;
}

.header-safe {
    max-width: 1920px;
    min-width: 1200px;
    height: 30px;
    background-color: #2F3030;
    margin: 0 auto;
}

.header-content {
    width: 1200px;
    height: 30px;
    background-color: #2F3030;
    margin: 0 auto;
}

.header-content .info {
    color: #FFFFFF;
    font-size: 14px;
    line-height: 30px;
}

.header-content .login-reg,
.header-content .login-reg a {
    color: #FFFFFF;
    font-size: 14px;
    line-height: 30px;
}

.header-bottom {
    width: 100%;
    height: 135px;
}

.header-safety {
    max-width: 1920px;
    min-width: 1200px;
    height: 135px;
    margin: 0 auto;
}

.header-logo {
    width: 1200px;
    height: 135px;
    margin: 0 auto;
}

.search {
    margin-top: 55px;
}

.search .select {
    line-height: 30px;
    margin-right: 20px;
}

.search select {
    border: 0;
    color: #2F3030;
    font-size: 16px;
    width: auto;
    padding: 0 2%;
    margin: 0;
    text-align: center;
    text-align-last: center;
}

.sousuo {
    position: relative;
    width: 300px;
    height: 30px;
    border: 1px solid #CACACA;
    border-radius: 5px;
}

.sousuo input {
    width: 252px;
    height: 30px;
    border: 0;
    border-radius: 5px;
    margin-left: 22px;
}

.sousuo .search-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    background-color: #EC6D3A;
}

.banner {
    width: 100%;
    height: 375px;
}

.banner-safe {
    position: relative;
    max-width: 1920px;
    min-width: 1200px;
    height: 100%;
    margin: 0 auto;
}

.banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    z-index: -99;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-filter: blur(6px);
    -moz-filter: blur(6px);
    -o-filter: blur(6px);
    -ms-filter: blur(6px);
    filter: blur(6px);
}

.baner-content {
    position: relative;
    width: 1200px;
    height: 100%;
    margin: 0 auto;
}

.baner-content .swiper-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.baner-content .swiper-container .swiper-slide img {
    width: 100%;
    height: 100%;
}

.baner-content .pagination {
    position: absolute;
    bottom: 19px;
    left: 48%;
}

.baner-content .swiper-pagination-switch {
    display: inline-block;
    width: 32px;
    height: 3px;
    margin-right: 14px;
    cursor: pointer;
    background-color: #fff;
}

.baner-content .swiper-active-switch {
    background: #EC6D3A;
}

.baner-content .tab {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    background-color: rgba(0, 0, 0, .4);
    color: #FFFFFF;
}

.baner-content .tab span {
    font-size: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

.baner-content .tab li {
    cursor: pointer;
    height: 74px;
    line-height: 74px;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
    border-right: 1px solid rgba(255, 255, 255, .5);
}

.baner-content .tab li:last-child {
    border-bottom: 0;
}

.baner-content .tab li a {
    font-size: 16px;
    color: #fff;
    margin-right: 20px;
    border-bottom: 1px solid transparent;
}

.baner-content .tab li a:hover {
    border-bottom: 1px solid #fff;
}

.baner-content .tab .list {
    width: 300px;
    padding: 20px;
    top: 0;
    line-height: 30px;
}

.baner-content .tab .list a {
    font-size: 16px;
    color: #fff;
    border-bottom: 1px solid transparent;
    margin-right: 14px;
}

.baner-content .tab .list a:hover {
    border-bottom: 1px solid #fff;
}

.baner-content .tab .more {
    cursor: pointer;
}
    </style>
</head>

<body>
    <div class="banner">
        <div class="banner-safe">
            <div class="banner-bg">
            </div>
            <div class="baner-content">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="images/index1.jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="images/index2.jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="images/index3.jpg" alt="">
                        </div>
                    </div>
                    <div class="pagination"></div>
                </div>
                <div class="tab clearfix">
                    <ul class="f-left">
                        <li><span>国学</span><a href="">摄影</a><a href="">唱歌</a><i class="layui-icon" style="font-size: 16px; color: #fff;">&#xe602;</i> </li>
                        <li><span>国学</span><a href="">摄影</a><a href="">唱歌</a><i class="layui-icon" style="font-size: 16px; color: #fff;">&#xe602;</i> </li>
                        <li><span>国学</span><a href="">摄影</a><a href="">唱歌</a><i class="layui-icon" style="font-size: 16px; color: #fff;">&#xe602;</i> </li>
                        <li><span>国学</span><a href="">摄影</a><a href="">唱歌</a><i class="layui-icon" style="font-size: 16px; color: #fff;">&#xe602;</i> </li>
                        <li><span>国学2</span><a href="">摄影</a><a href="">唱歌</a><i class="layui-icon" style="font-size: 16px; color: #fff;">&#xe602;</i> </li>
                        <div class="more">
                            <div class="gengduo hide" style="height:74px;line-height:74px;font-size:20px;text-align:center;border-right:1px solid rgba(255, 255, 255, .5);">更多<i class="layui-icon" style="font-size: 16px; color: #fff;">&#xe61a;</i>
                            </div>
                            <ul class="hide">
                                <li><span>国学</span><a href="">摄影</a><a href="">唱歌</a><i class="layui-icon" style="font-size: 16px; color: #fff;">&#xe602;</i> </li>
                                <li><span>国学</span><a href="">摄影</a><a href="">唱歌</a><i class="layui-icon" style="font-size: 16px; color: #fff;">&#xe602;</i> </li>
                            </ul>
                        </div>
                    </ul>
                    <div class="list hide f-left">
                        <a href="">国学1</a>
                        <a href="">国学2</a>
                        <a href="">国学3</a>
                        <a href="">国学4</a>
                        <a href="">国学5</a>
                        <a href="">国学6</a>
                        <a href="">国学7</a>
                        <a href="">国学8</a>
                        <a href="">国学9</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="lib/jquery-3.2.1.min.js"></script>
    <script src="lib/idangerous.swiper.min.js"></script>
    <script src="lib/layui/layui.all.js"></script>
    <script src="js/index.js"></script>
    <script>
        var bg1 = $('.baner-content .swiper-container .swiper-slide').eq(0).children('img').attr('src');
    $('.banner-bg').css("background-image", "url(" + bg1 + ")");
    var mySwiper = new Swiper('.baner-content .swiper-container', {
        pagination: '.baner-content .pagination',
        paginationClickable: true,
        moveStartThreshold: 100,
        autoplay: 1500,
        loop: true,
        onSlideChangeEnd: function(swiper) {
            bg();
        }
    })

    function bg() {
        var bg = $('.baner-content .swiper-slide-active').children('img').attr('src');
        $('.banner-bg').css("background-image", "url(" + bg + ")");
    }
    var height = $('.tab').height();
    var height2 = 75 * $('.tab .more li').length;
    $('.baner-content .tab .list').css('height', height - 41 + 'px');
    $('.tab').mouseover(function(event) {
        $('.baner-content .tab .list').show();
    });
    if ($('.tab li').length > 5) {
        $('.tab .gengduo').show();
        $('.tab>ul li:nth-child(5)').remove();
    }
    $('.tab .more').mouseenter(function(event) {
        if ($('#remove').length === 0) {
            $('.tab .more li:first-child').before('<li id="remove"><span>国学2</span><a href="">摄影</a><a href="">唱歌</a><i class="layui-icon" style="font-size: 16px; color: #fff;">&#xe602;</i> </li>');
        }
        $('.tab .more>ul').show();
        $('.tab .gengduo').hide();
        // $('.baner-content .tab .list').css('left', width2 + 'px');
        $('.baner-content .tab .list').css('height', height + height2 - 41 + 'px');
    });
    $('.tab').mouseleave(function(event) {
        $('.baner-content .tab .list').hide();
        $('.tab .gengduo').show();
        $('.tab .more>ul').hide();
        // $('.baner-content .tab .list').css('left', width + 'px');
        $('.baner-content .tab .list').css('height', height - 41 + 'px');
    });
    </style>
</body>

</html>

 

丽丽1992
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
web轮播图+侧边栏.zip
06-03
web大作业侧边栏+轮播图
bootstrap案例包括： 响应式导航菜单；banner轮播；栅格布局；固定定位
05-19
bootstrap案例包括： 响应式导航菜单；banner轮播；栅格布局；固定定位。
仿京东商城首页（图片轮播、左侧悬浮导航栏、头部悬浮搜索框、右侧悬浮栏）
热门推荐
积极废人的博客
08-10 1万+
首页太长截成几个小部分写的东西基本都在里面了 基本的html+css布局，图片轮播，左侧悬浮导航栏 头部悬浮搜索框 右侧导航按钮（详情见图5） 。适合学完html+css对js，jquery有一定了解的人学习。代码太多，来个大神教一下怎么上传代码 要资源的给个赞呗？ ...
使用jQuery简单实现产品展示的图片左右滚动功能
jokewangloveyou的专栏
01-14 1953
Insert title here #product { width:720px; height:200px; border:1px solid #ccc; margin:0 5px 5px 0; float:left; } #product div#content { position:relative; width:690px; height:160px; display:
jquery产品图片左右轮播插件
ICode联盟
08-22 121
jquery产品图片左右轮播插件，js实现的商品图片自动轮播滚动展示，带左右按钮控制，悬停图片透明高亮效果代码。
原生 js+css+html实现轮播图效果及左侧菜单栏效果
奋斗在前端的实习生
05-10 5788
&lt;!--仅作为 个人笔记  有幸被搜到 希望对大家有帮助   欢迎大家来此探讨一起学习技术 。--&gt;//轮播图  效果和上一篇 中的轮播图代码 一致  此篇是在轮播基础上新增的 左侧菜单栏效果/*css代码 部分*/                     *{ margin: 0px; padding: 0px; } body{ color: #...
（PC移动端通用）底部固定悬浮图片轮播代码.zip
07-22
（PC移动端通用）底部固定悬浮图片轮播代码，亲测可以用！
bootstrap制作轮播图,水平导航栏,垂直导航栏
风一样的男子
08-20 2923
1.官网下载bootstrap https://v3.bootcss.com/ 2.引入js和相应的css 此处引用的是themeleaf写法 &lt;link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet"&gt; &lt;script th:src="@{/jquery/jquery-1.11.1.min...
JavaScript实现轮播特效 + 二级菜单效果（代码）
10-01
JavaScript实现轮播特效 + 二级菜单效果（代码），资源整全。 - Lux_Sun CSDN Blog：https://blog.csdn.net/Dream_Weave
jQuery页面滚动左侧悬浮固定导航菜单代码
06-05
这是一款页面滚动下拉的时候左侧悬浮固定导航菜单代码，jQuery页面滚动固定层菜单网页特效下载。
jQuery招聘网站左侧导航分类菜单代码.zip
07-11
代码： <link rel="stylesheet" href="css/base.css?3.1.64"> <link rel="stylesheet" href="css/home.css?3.1.64"> [removed][removed] [removed] $(function(){ $('.aui-content-main ....
jQuery招聘网站左侧导航分类菜单代码
06-05
jQuery招聘网站左侧导航分类菜单代码是一款适用于分类比较多的网站分类导航插件，鼠标悬停显示二级、三级子分类菜单。
jQuery仿天猫商品分类导航菜单切换代码
06-05
一款不错的jQuery仿天猫商品分类导航菜单切换代码，网上商城常用的首页分类菜单效果。
jQuery手机移动端垂直分类菜单导航切换代码
06-05
这是一款jQuery实现的手机移动端垂直分类菜单导航切换代码特效。
神经网络与量子计算的交叉研究.pptx
04-19
神经网络与量子计算的交叉研究.pptx
非线性端口 MEMS 麦克风的 Simscape 模型.zip
04-19
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
用于超声成像和仿真的 MATLAB 工具箱.zip
最新发布
04-19
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
jquery实现左侧导航菜单
07-28
可以使用jQuery来实现左侧导航菜单。下面是一个简单的示例代码： HTML部分： ```html <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> <li><a href="#">菜单项3</a></li> <li><a href=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值