导航栏(nav.js)

//处理首页的导航部分   AMD
define(["jquery"],function($){
   //通过define声明,第一个参数传入要用的模块,直接用$就可以拿到这个数据
    function download() {
   
        //封装第一个函数来下载数据(轮播图的数据)
        $.ajax({
   
            type: "get",
            url: "../data/nav.json",
            success: function(data){
   
                //第一部分,实现轮播图效果
                var bannerArr = data.banner;//下载成功之后取出数据(数组)
                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");
                    //将图片插入到#J_homeSwiper .swiper-slide的后面
                    var node = $(` <a href="#" class = 'swiper-pagination-bullet'></a>`);
                    if(i == 0){
   
                        node.addClass("swiper-pagination-bullet-active");//圆圈的状态是被选中
                    }//圆圈是通过ajax异步加载的
                    node.appendTo("#J_homeSwiper .swiper-pagination");
                }
            },
            error: function (msg) {
   
                console.log(msg);
            }
        });
        leftNavDownload();
        topNavDownload();
    }
        //实现轮播图的效果
        function banner(){
   
            var iNow = 0;//当前显示图片的下标
            var aImags = null;//图片
            var aBtns = null;//圆圆
            //启动一个定时器,每隔2.5s切换一张图片
            var timer =setInterval(function(){
   
                iNow++;
                tab();
            },2500);
            //封装切换函数
            function tab(){
   
                if(!aImags){
   //如果图片不存在(没有假数据)
                    aImags = $("#J_homeSwiper .swiper-slide").find("a");
                }
                if(!aBtns){
   
                    aBtns = $("#J_homeSwiper .swiper-pagination").find("a");
                }
                if(iNow == 5){
   //最后一张直接跳到第一张
                    iNow = 0;
                }
                //图片切换
                aImags.hide().css

你可能感兴趣的:(笔记)