lwwlgw/js/javascript.js

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');
	});
})