//处理首页的导航部分 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</
导航栏(nav.js)
最新推荐文章于 2023-05-30 19:20:20 发布