导航栏(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</
  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值