jQuery(function($){ // banner轮播 var number = $('.banner-swiper .swiper-slide').length-2; if(number>1){ var bannerSwiper = new Swiper('.banner-swiper',{ loop:true,//开启循环播放 autoplay: {//开启自动播放 delay:3000, disableOnInteraction: false,//触摸后不会停止自动滚动 pauseOnMouseEnter: true,//鼠标置于swiper时暂停自动切换,鼠标离开时恢复自动切换。 }, pagination: { el: '.banner-swiper .swiper-pagination', clickable :true, }, effect : 'slide',//轮播的动效 默认为"slide"(普通位移切换),还可设置为"fade"(淡入)、"cube"(方块)、"coverflow"(3d流)、"flip"(3d翻转)、"cards"(卡片式)、"creative"(创意性)。 // fadeEffect: { // crossFade: true, // }, on:{ init: function(){ swiperAnimateCache(this); //隐藏动画元素 swiperAnimate(this); //初始化完成开始动画 }, slideChangeTransitionEnd: function(){ swiperAnimate(this); //每个slide切换结束时也运行当前slide动画 // this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次,去除ani类名 } } }); } // 数据产品切换 $(".product-list li").eq(0).addClass("cur"); $('.product-item li').hover(function() { $(".product-item li").eq($(this).index()).addClass("active").siblings().removeClass('active'); $(".product-list li").eq($(this).index()).addClass("cur").siblings().removeClass('cur'); }); // 回到顶部 $('#toTop').click(function(){$('html,body').animate({scrollTop:$('#top').offset().top}, 600);}); //暂停&播放 $('.experience-audio>.play-btn').click(function() { let audio = $('.experience-audio>.play-btn'); for (let i=0;i.play-btn').removeClass("active"); $(this).addClass("active"); $(this).next()[0].play();//播放 }else{ $(this).removeClass("active"); $(this).next()[0].pause();//暂停 } }); // 产品锚点 $('.onExperience').click(function(){ $('html,body').animate({scrollTop:$('.experience-bg').offset().top - 122}, 600); $('.product-nav-item>li').removeClass("active"); $(this).addClass("active"); }); $('.onAdvantage').click(function(){ $('html,body').animate({scrollTop:$('.advantage-bg').offset().top - 122}, 600); $('.product-nav-item>li').removeClass("active"); $(this).addClass("active"); }); $('.onScene').click(function(){ $('html,body').animate({scrollTop:$('.scene-bg').offset().top - 122}, 600); $('.product-nav-item>li').removeClass("active"); $(this).addClass("active"); }); $('.onPrice').click(function(){ $('html,body').animate({scrollTop:$('.price-bg').offset().top - 122}, 600); $('.product-nav-item>li').removeClass("active"); $(this).addClass("active"); }); $('.onDeveloper').click(function(){ $('html,body').animate({scrollTop:$('.developer-bg').offset().top - 122}, 600); $('.product-nav-item>li').removeClass("active"); $(this).addClass("active"); }); // 应用场景切换 $(".scene-list li").eq(0).addClass("cur"); $('.scene-item li').hover(function() { $(".scene-item li").eq($(this).index()).addClass("active").siblings().removeClass('active'); $(".scene-list li").eq($(this).index()).addClass("cur").siblings().removeClass('cur'); }); // 关于我们 $(".about-content-bg>div").eq(0).addClass("cur"); $('.about-nav-item li').click(function() { $(".about-nav-item li").eq($(this).index()).addClass("active").siblings().removeClass('active'); $(".about-content-bg>div").eq($(this).index()).addClass("cur").siblings().removeClass('cur'); }); // 加入我们 $(".join-class li").eq(0).addClass("cur"); $(".join-list li").eq(0).addClass("cur"); $(".join-list li").eq(0).find(".join-list-item").eq(0).addClass("active"); $(".join-list li").eq(1).find(".join-list-item").eq(0).addClass("active"); $('.join-item li').click(function() { $(".join-item li").eq($(this).index()).addClass("active").siblings().removeClass('active'); $(".join-class li").eq($(this).index()).addClass("cur").siblings().removeClass('cur'); $(".join-list li").eq($(this).index()).addClass("cur").siblings().removeClass('cur'); }); $('.join-class li span').click(function() { $(".join-class li.cur span").eq($(this).index()).addClass("active").siblings().removeClass('active'); $(".join-list li.cur .join-list-item").eq($(this).index()).addClass("active").siblings().removeClass('active'); }); // 判断价格图片是否为空 if(!$('.price img').attr('src')){ $(".price").html("定价图片后台上传"); } // 手机导航按钮 $('.head .head-btn').click(function() { if ($('.head .head-btn').attr('class') == 'head-btn cur') { $('.head .head-btn').removeClass('cur'); $('.head .nav').removeClass('active'); $('.head .nav-bg').removeClass('active'); } else { $('.head .head-btn').addClass('cur'); $('.head .nav').addClass('active'); $('.head .nav-bg').addClass('active'); $('.head .logo').addClass('active'); } }); $('.head .nav-bg').click(function() { $(this).removeClass('active'); $('.head .head-btn').removeClass('cur'); $('.head .nav').removeClass('active'); }); })