用 gulp require.js 和 jQuery 写一个小米项目之-----顶部导航栏的实现

nav.js（main.js自己在去配置一下就行了 这里就不放出来了只是多了一个顶部导航的函数）

//处理首页的导航部分 声明模块也遵循amd
define(["jquery"],function(){
    function download(){
        //数据下载
        $.ajax({
            type:"get",
            url:"../data/nav.json",
            success:function(result){
                // alert(result);
                var bannerArr = result.banner;//获取json中轮播图的数据
                for(var i=0; i< bannerArr.length; i++){
                    $(`<a href="${bannerArr[i].url}">
                    <img class='swiper-lazy swiper-lazy-loaded' src = 'images/banner/${bannerArr[i].img}' alt=""/>
                    </a>`).appendTo("#J_homeSwiper .swiper-slide"); //把图片插入到轮播图的位置

                    var node = $(`<a href="#" class = 'swiper-pagination-bullet'></a>`); //定义圆点

                    if(i==0){
                        node.addClass("swiper-pagination-bullet-active"); //把第一个圆点显示白色
                    }
                    
                    node.appendTo("#J_homeSwiper .swiper-pagination");//把圆点插入位置中
                     
                }  
            }, 
            error:function(msg){
                console.log(msg);
            }
        })
    }
    function banner(){
        var xiabiao = 0 ; //获取图片的下标
        var tupian =null ; //获取图片
        var yuandian = null ; //获取圆点
        //定时器切换图片
        var timer = setInterval(function(){
            xiabiao++;  
            qiehuan();               
        },2500);

        //图片的切换
        function qiehuan(){
            if(!tupian){
                tupian = $("#J_homeSwiper .swiper-slide").find("a");
            }if(!yuandian){
                yuandian = $("#J_homeSwiper .swiper-pagination").find("a");
            }
            //如果是最后一张图片 跳到第一张图
            if(xiabiao == 5){
                xiabiao =0;
            }  
            /*吧所有图片隐藏然后设置透明度为0.2 之后找到切换图片的下标 将其显示出来 最后用动画将
            需要显示的图片用动画设置显示*/
            tupian.hide().css("opacity",0.2).eq(xiabiao).show().animate({opacity:1},500);

            //圆点切换先移出白色  之后找到下标  最后添加白色
            yuandian.removeClass("swiper-pagination-bullet-active").eq(xiabiao).addClass("swiper-pagination-bullet-active");
        }


        //  如果鼠标移入停止定时器   鼠标移出启动定时器
        $("#J_homeSwiper,.swiper-button-prev,.swiper-button-next").mouseenter(function(){
            clearInterval(timer);
            // console.log(timer);
        }).mouseleave(function(){
            timer = setInterval(function(){
                xiabiao++;  
                qiehuan();               
            },2500);    
        });
        
        //点击小圆圈跳到对应图片  事件委托处理 （因为是ajax动态插进去的 不用事件委托找不到标签）
        $("#J_homeSwiper .swiper-pagination").on("click","a",function(){
            xiabiao = $(this).index(); //找到下标
            qiehuan(); //切换
            return false;   //阻止a连接重新刷新
        });
        //点击上下一张切换
        $(".swiper-button-prev,.swiper-button-next").click(function(){
           
            if(this.className == "swiper-button-prev"){
                xiabiao--;
                if(xiabiao < 0){
                    xiabiao = 4;   
                }
            }else{
                xiabiao++;
            }
            qiehuan();
        })
    }

    //主页侧边栏导航
    function leftdaohang(){
        $.ajax({
            url:"../data/nav.json",
            success: function(result){
                var leftArr = result.sideNav;//获取数据
                // alert(leftArr[0].title);
                for(var i=0; i< leftArr.length ; i++){
                    var node = $(`<li class = 'category-item'>
                    <a href="/index.html" class = 'title'>
                        ${leftArr[i].title}
                        <em class = 'iconfont-arrow-right-big'></em>
                    </a>
                    <div class="children clearfix children-col-4">
                       
                    </div> 
                     </li>`);
                    //把li标签插入到导航栏中
                    node.appendTo("#J_categoryList");
                    //找到子标签中的数据
                    var childArr = leftArr[i].child;

                    //每6个商品是一行  计算需要几行
                    var col = Math.ceil(childArr.length / 6);

                    for(var j = 0; j < childArr.length; j++){
                        if(j % 6 ==0){
                           var newUl = $(`<ul class="children-list children-list-col children-list-col-${col}">
                        </ul>`);
                        newUl.appendTo(node.find("div.children"));
                        }
                        $(`<li>
                        <a href="http://www.mi.com/redminote8pro">
                            <img src="${childArr[j].img}"  width="40" height="40" class="thumb">
                            <span class="text">${childArr[j].title}</span>
                        </a>
                        </li>`).appendTo(newUl);//把需要显示出来的li插入到分好组的ul中
                    }
                }
            },
            error: function(esg){
                console.log(esg);
            }
        })
    }
    //给侧边栏添加鼠标移入移出  事件委托
    function lefthideshow(){
        $(`#J_categoryList`).on("mouseenter",".category-item", function(){
            $(this).addClass("category-item-active");
        }).on("mouseleave",".category-item",function(){
            $(this).removeClass("category-item-active");
        });
    }
    //顶部导航
    function topdaohang(){
        $.ajax({
            url:"../data/nav.json",
            success:function(result){
                //顶部导航插入标签
                var topArr = result.topNav;//获取数据
                topArr.push({title:"服务"},{title: "社区"});//加入新数据
                for(var i = 0;i<topArr.length;i++){
                    $(`<li data-index="${i}" class="nav-item">
                    <a href="" class="link">
                        <span class="text">${topArr[i].title}</span>
                    </a>
                </li> `).appendTo(".header-nav .nav-list");//插入标签

                var node = $(`<ul class="children-list clearfix"></ul>`);
                node.appendTo("#J_navMenu");
                if(topArr[i].childs){//如果有子元素数据的就加入没有就不加入
                //获取子元素的数据
                var childsArr = topArr[i].childs;
                
                    for(var j = 0; j < childsArr.length ; j++){
                        $(`<li>
                            <a href="#">
                                <div class = 'figure figure-thumb'>
                                    <img src="${childsArr[j].img}" alt=""/>
                                </div>
                                <div class = 'title'>${childsArr[j].a}</div>
                                <p class = 'price'>${childsArr[j].i}</p>
                            </a>
                        </li>`).appendTo(node);
                    }
                }
            }            
            },
            error:function(msg){
                alert(msg);
            },                 
        },
                //添加移入移出操作(事件委托)
                $(".header-nav .nav-list").on("mouseenter",".nav-item",function(){
                    //移入颜色变红
                    $(this).addClass("nav-item-active");
                    //找到移入的下标  -1是因为下面是从0开始的
                    var index = $(this).index() -1;
                    if(index>=0 && index<=6){
                        //将UL显示出来
                        $("#J_navMenu").css({display:"block"}).animate({height:"240px"},30);
                        //将里面的手机图片数据等显示出来
                        $("#J_navMenu").find("ul").eq(index).css({display:"block"}).siblings("ul").css({display:"none"});
                    }  
                    
                }).on("mouseleave",".nav-item",function(){
                     //移出颜色消失
                    $(this).removeClass("nav-item-active");                        
                }),

                //移出的时候取消下拉菜单
               
                    $(".header-nav .nav-list").on("mouseenter",".nav-item",function(){
                        var index = $(this).index() -1;
                        // console.log(index);
                        if(index>=0 && index<=6){
                            $(".site-header").mouseleave(function(){
                                $("#J_navMenu").css({display: "block"}).animate({height:"0px"},30);
                            })  
                        }else{
                            $("#J_navMenu").css({display: "block"}).animate({height:"0px"},30);
                        }
                          
                    }       
                )
        )
    }

    return {
        download: download,
        banner:banner,
        leftdaohang:leftdaohang,
        lefthideshow:lefthideshow,
        topdaohang:topdaohang
    }
})

html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <title>小米商城 - Redmi Note 8、小米CC9、小米MIX 3，小米电视官方网站</title>
        <meta name="description" content="小米商城直营小米公司旗下所有产品，包括小米手机系列小米CC9、小米9、小米MIX 3，Redmi 红米系列Redmi K20 Pro、Redmi Note 8，小米电视、红米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持。" />
        <meta name="keywords" content="小米,小米9,小米cc9,Redmi K20,Redmi Note 8,小米MIX3,小米商城" />
        <link rel="shortcut icon" href="//s01.mifile.cn/favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" href="css/index.min.css"/> 
        <script src = 'js/require.js' defer async = 'true' data-main = 'js/main.js'></script>
    </head>
    <body> 
        <div id = 'app'>
            <div>
                <div class = 'header'>
                    <div class = 'site-topbar'>
                        <div class = 'container'>
                            <div class = 'topbar-nav'>
                                <a rel="nofollow"  href="#" >小米商城</a>
                                <span class="sep">|</span>
                                <a rel="nofollow" href="#" target="_blank">MIUI</a>
                                <span class="sep">|</span>
                                <a rel="nofollow" href="#" target="_blank">IoT</a>
                                <span class="sep">|</span>
                                <a rel="nofollow" href="#" target="_blank">云服务</a>
                                <span class="sep">|</span>
                                <a rel="nofollow" href="#" target="_blank">金融</a>
                                <span class="sep">|</span>
                                <a rel="nofollow" href="#" target="_blank">有品</a>
                                <span class="sep">|</span>
                                <a rel="nofollow" href="#" target="_blank">小爱开放平台</a>
                                <span class="sep">|</span>
                                <a rel="nofollow" href="#" target="_blank">企业团购</a>
                                <span class="sep">|</span>
                                <a rel="nofollow" href="#" target="_blank">资质证照</a>
                                <span class="sep">|</span>
                                <a rel="nofollow" href="#" target="_blank"  >协议规则</a>
                                <span class="sep">|</span>
                                <a rel="nofollow" href="#" target="_blank" class="topbar-download" id="J_siteDownloadApp">
                                    下载app
                                    <span class="appcode">
                                        <img src="//i1.mifile.cn/f/i/17/appdownload/download.png?1" alt="小米商城" width="90" height="90">
                                        小米商城APP
                                    </span>
                                </a>
                                <span class="sep">|</span>
                                <a rel="nofollow" href="javascript:;"  class="J_siteGlobalRegion">Select Location</a>
                            </div>
                            <div class = 'topbar-cart' id = 'J_miniCartTrigger'>
                                <a rel="nofollow" class="cart-mini" id="J_miniCartBtn">
                                    <em class="iconfont-cart"></em><em class="iconfont-cart-full hide"></em>购物车<span class="cart-mini-num J_cartNum"></span>
                                    <em class = 'iconfont-cart-full hide'></em>
                                    <span class = 'cart-mini-num J_cartNum'>（0）</span>
                                </a>
                                <div class="cart-menu" id="J_miniCartMenu">
                                    <div class="menu-content">
                                        <div class="loading"><div class="loader"></div></div>
                                        <ul class="cart-list hide" id="J_miniCartList"></ul>
                                        <div class="cart-total clearfix hide" id="J_miniCartListTotal"></div>
                                        <div class="msg msg-error hide"></div>
                                        <div class="msg msg-empty hide">购物车中还没有商品，赶紧选购吧！</div>
                                    </div>
                                </div>
                            </div>
                            <div class = 'topbar-info' id = 'J_siteUserInfo'>
                                <a href="#" class = 'link' >登录</a>
                                <span class = 'sep'>|</span>
                                <a href="#" class = 'link'>注册</a>
                            </div>
                        </div>
                    </div>
                    <div class = 'site-header'>
                        <div class = 'container'>
                            <div class = 'header-logo'>
                                <a class="logo ir" href="/index.html" title="小米官网" onclick = "_msq.push(['trackEvent', '81190ccc4d52f577-1de2e5c522d7b543', '//www.mi.com/index.html', 'pcpid', '']);">小米官网</a>
                            </div>
                            <div class = 'header-nav'>
                                <ul class = 'nav-list J_navMainList clearfix'>
                                    <li id = 'J_navCategory' class = 'nav-category'>
                                        <a href="#" class = 'link-category'>
                                            <span class = 'text'>全部商品分类</span>
                                        </a>
                                        <!--侧边导航-->
                                        <div class = 'site-category' style="display: block">
                                            <ul id = 'J_categoryList' class = 'site-category-list clearfix  site-category-list-custom'>                                 
                                            </ul>
                                        </div>
                                    </li>
                                     <!--顶部导航-->
                                     <!-- <li data-index="0" class="nav-item nav-item-active">
                                         <a href="" class="link">
                                             <span class="text">小米手机</span>
                                         </a>
                                     </li>  -->
                                </ul>
                            </div>
                          <!--顶部导航--> 
                        <div id = 'J_navMenu' class="header-nav-menu slide-up header-nav-menu-active " style = 'display: none'>
                            
                        </div>
                    </div>
                </div>

            </div>
            <!-- 轮播图 -->
            <div class = 'home-hero-container container'>
                    <!-- 轮播图 -->
                    <div id = 'J_homeSwiper' class = 'swiper-container home-hero-swiper swiper-no-swiping swiper-container-fade swiper-container-initialized swiper-container-horizontal'>
                        <div class = 'swiper-slide'>
                            
                        </div>
                        <div class = 'swiper-pagination swiper-pagination-clickable swiper-pagination-bullets'>
                            <!-- <a href="#" class = 'swiper-pagination-bullet swiper-pagination-bullet-active'></a> -->
                        </div>
                    </div>
                    <div class = 'swiper-button-prev' aria-label="Previous slide"></div>
                    <div class = 'swiper-button-next' aria-label="Next slide"></div>
            </div>
    </body>
</html>

结果