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

最新推荐文章于 2022-07-04 18:15:07 发布

OrdnAry

最新推荐文章于 2022-07-04 18:15:07 发布

阅读量322

点赞数

分类专栏：学习文章标签： js jquery ajax

本文链接：https://blog.csdn.net/OrdnAry/article/details/110999552

版权

学习专栏收录该内容

59 篇文章 5 订阅

订阅专栏

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>