jQuery(function($){ // banner轮播 var number = $('.banner-swiper .swiper-slide').length; if(number>1){ var bannerSwiper = new Swiper('.banner-swiper',{ loop:true,//开启循环播放 autoplay: {//开启自动播放 delay:54000, disableOnInteraction: false,//触摸后不会停止自动滚动 pauseOnMouseEnter: true,//鼠标置于swiper时暂停自动切换,鼠标离开时恢复自动切换。 }, pagination: { el: '.banner-swiper .swiper-pagination', clickable :true, }, effect : 'fade',//轮播的动效 默认为"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类名 }, } }); } // 加载动画 if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){ var wow = new WOW({ boxClass: 'wow', animateClass: 'animated', offset: -50, mobile: true, live: true }); wow.init(); }; // 首页产品切换 $(".index-product-item>li").eq(0).addClass("active"); $(".index-product-list>li").eq(0).addClass("cur"); $('.index-product-item>li').click(function(){ $(".index-product-item>li").eq($(this).index()).addClass("active").siblings().removeClass('active'); $(".index-product-list>li").eq($(this).index()).addClass("cur").siblings().removeClass('cur'); }); // 应用场景切换 $('.scene-list>li').find('h3').click(function() { if($(this).parent().attr('class') == 'wow fadeInUp animated active'){ $('.scene-list>li').removeClass('active'); $(this).parent().find('.product-scene-txt').removeClass('cur') }else{ $('.scene-list>li').removeClass('active') $('.scene-list>li').find('.product-scene-txt').removeClass('cur') $(this).parent().addClass('active') $(this).parent().find('.product-scene-txt').addClass('cur') } }); // 案例滚动 var productCaseSwiper = new Swiper('.product-case-swiper',{ loop:false,//开启循环播放 autoplay: {//开启自动播放 delay:3000, }, pagination: { el: '.case-list-bg .swiper-pagination', clickable :true, }, navigation: { nextEl: '.case-list-bg .swiper-button-next', prevEl: '.case-list-bg .swiper-button-prev', }, effect : 'slide', on: { slideChange: function(){ $('.product-case-swiper').find('.case-txt').removeClass('open'); $('.product-case-swiper').find(".case-btns").html("展开详情"); }, } }); // 案例展开详情 $('.case-btns').click(function() { if($(this).parent().find('.case-txt').attr('class') == 'case-txt open'){ $('.product-case-swiper').find('.case-txt').removeClass('open'); $('.product-case-swiper').find(".case-btns").html("展开详情"); }else{ $('.product-case-swiper').find('.case-txt').removeClass('open'); $(this).parent().find('.case-txt').addClass('open'); $('.product-case-swiper').find(".case-btns").html("展开详情"); $(this).parent().find(".case-btns").html("收起详情"); } }); // 展品中心锚点 $('.introduce-btn').click(function(){ $('html,body').animate({scrollTop:$('.product-introduce-bg').offset().top - 84}, 1000); $('.side-left>a').removeClass("active"); $(this).addClass("active"); }); $('.scene-btn').click(function(){ $('html,body').animate({scrollTop:$('.product-scene-bg').offset().top - 84}, 1000); $('.side-left>a').removeClass("active"); $(this).addClass("active"); }); $('.case-btn').click(function(){ $('html,body').animate({scrollTop:$('.product-case-bg').offset().top - 84}, 1000); $('.side-left>a').removeClass("active"); $(this).addClass("active"); }); // 关于我们锚点 $('.about-btn').click(function(){ $('html,body').animate({scrollTop:$('.about-bg').offset().top - 84}, 1000); $('.about-nav>a').removeClass("active"); $(this).addClass("active"); }); $('.memorabilia-btn').click(function(){ $('html,body').animate({scrollTop:$('.memorabilia-bg').offset().top - 84}, 1000); $('.about-nav>a').removeClass("active"); $(this).addClass("active"); }); $('.join-btn').click(function(){ $('html,body').animate({scrollTop:$('.join-bg').offset().top - 84}, 1000); $('.about-nav>a').removeClass("active"); $(this).addClass("active"); }); $('.contact-btn').click(function(){ $('html,body').animate({scrollTop:$('.contact-bg').offset().top - 84}, 1000); $('.about-nav>a').removeClass("active"); $(this).addClass("active"); }); // 大事件滚动 if(screen.width <= 768){ var memorabiliaThumbnailSwiper = new Swiper('.memorabilia-thumbnail-swiper',{ slidesPerView: 4, spaceBetween: 0, watchSlidesVisibility: true,//防止不可点击 }) var memorabiliaSwiper = new Swiper('.memorabilia-swiper',{ autoplay: true, effect : 'fade', fadeEffect: { crossFade: true, }, navigation: { nextEl: '.memorabilia-swiper .swiper-button-next', prevEl: '.memorabilia-swiper .swiper-button-prev', }, thumbs: { swiper: memorabiliaThumbnailSwiper, }, on:{ init: function(){ swiperAnimateCache(this); //隐藏动画元素 swiperAnimate(this); //初始化完成开始动画 }, slideChangeTransitionEnd: function(){ swiperAnimate(this); //每个slide切换结束时也运行当前slide动画 // this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次,去除ani类名 }, } }) }else{ var memorabiliaThumbnailSwiper = new Swiper('.memorabilia-thumbnail-swiper',{ slidesPerView: 7, spaceBetween: 0, watchSlidesVisibility: true,//防止不可点击 }) var memorabiliaSwiper = new Swiper('.memorabilia-swiper',{ autoplay: true, effect : 'fade', fadeEffect: { crossFade: true, }, navigation: { nextEl: '.memorabilia-swiper .swiper-button-next', prevEl: '.memorabilia-swiper .swiper-button-prev', }, thumbs: { swiper: memorabiliaThumbnailSwiper, }, on:{ init: function(){ swiperAnimateCache(this); //隐藏动画元素 swiperAnimate(this); //初始化完成开始动画 }, slideChangeTransitionEnd: function(){ swiperAnimate(this); //每个slide切换结束时也运行当前slide动画 // this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次,去除ani类名 }, } }) } // 列表页二级导航切换 var navItemSwiper = new Swiper('.nav-item-swiper',{ slidesPerView: 'auto', slidesPerGroup: 1, slidesPerGroupAuto: true, autoplay:false, }) // 加入我们滚动 var joinThumbnailSwiper = new Swiper('.join-thumbnail-swiper',{ direction: 'vertical', slidesPerView: 8, watchSlidesVisibility: true,//防止不可点击 navigation: { nextEl: '.join-btns .swiper-button-next', prevEl: '.join-btns .swiper-button-prev', }, }) var joinSwiper = new Swiper('.join-swiper',{ autoplay: false, effect : 'fade', fadeEffect: { crossFade: true, }, thumbs: { swiper: joinThumbnailSwiper, }, on:{ init: function(){ swiperAnimateCache(this); //隐藏动画元素 swiperAnimate(this); //初始化完成开始动画 }, slideChangeTransitionEnd: function(){ swiperAnimate(this); //每个slide切换结束时也运行当前slide动画 // this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次,去除ani类名 }, } }) // 运维服务内容切换 $(".ywfw-item>li").eq(0).addClass("active"); $(".ywfw-list>li").eq(0).addClass("cur"); $('.ywfw-item>li').click(function(){ $(".ywfw-item>li").eq($(this).index()).addClass("active").siblings().removeClass('active'); $(".ywfw-list>li").eq($(this).index()).addClass("cur").siblings().removeClass('cur'); }); // 手机导航按钮 $('.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'); }); })