clxnew/js/javascript.js

jQuery(function($){
	// banner轮播
	var bannerSwiper = new Swiper('.banner-swiper',{
		loop:true,//开启循环播放
		autoplay: {//开启自动播放
			delay:3000,
			disableOnInteraction: false,//触摸后不会停止自动滚动
			pauseOnMouseEnter: true,//鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换。
		},
		
		pagination: {
			el: '.banner-swiper .swiper-pagination',
			type: 'fraction',
			formatFractionTotal: function (number) {
				switch(number)
					{
					  case 1:
					  myNum='01'
					  break;
					  case 2:
					  myNum='02'
					  break;
					  case 3:
					  myNum='03'
					  break;
					  case 4:
					  myNum='04'
					  break;
					  case 5:
					  myNum='05'
					  break;
					  case 6:
					  myNum='06'
					  break;
					  case 7:
					  myNum='07'
					  break;
					  case 8:
					  myNum='08'
					  break;
					  case 9:
					  myNum='09'
					  break;
					  default:myNum= number
					}
				 return myNum; 
			},
			formatFractionCurrent: function (number) {
				switch(number)
					{
					  case 1:
					  myNum='01'
					  break;
					  case 2:
					  myNum='02'
					  break;
					  case 3:
					  myNum='03'
					  break;
					  case 4:
					  myNum='04'
					  break;
					  case 5:
					  myNum='05'
					  break;
					  case 6:
					  myNum='06'
					  break;
					  case 7:
					  myNum='07'
					  break;
					  case 8:
					  myNum='08'
					  break;
					  case 9:
					  myNum='09'
					  break;
					  default:myNum= number
					}
				 return myNum; 
			},
			renderFraction: function (currentClass, totalClass) {
			  return '<span class="' + currentClass + '"></span>' +
					 ' <em>/</em>' +
					 '<span class="' + totalClass + '"></span>';
			},
		},
		
		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类名
			} 
		}
	});
	
	// 资质展示
	if(screen.width <= 768){
		var qualificationSwiper = new Swiper('.qualification-swiper',{
			loop:false,//开启循环播放
			autoplay: {//开启自动播放
				delay:3000,
				disableOnInteraction: false,//触摸后不会停止自动滚动
				pauseOnMouseEnter: true,//鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换。
			},
			slidesPerView : '1',
			spaceBetween : '0%',
			centeredSlides : false,
			navigation: {
				nextEl: '.qualification-swiper-bg .swiper-button-prev',
				prevEl: '.qualification-swiper-bg .swiper-button-next',
			},
			
		});
	}else{
		var qualificationSwiper = new Swiper('.qualification-swiper',{
			loop:false,//开启循环播放
			autoplay: {//开启自动播放
				delay:3000,
				disableOnInteraction: false,//触摸后不会停止自动滚动
				pauseOnMouseEnter: true,//鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换。
			},
			slidesPerView : '4',
			spaceBetween : '3%',
			centeredSlides : false,
			navigation: {
				nextEl: '.qualification-swiper-bg .swiper-button-prev',
				prevEl: '.qualification-swiper-bg .swiper-button-next',
			},
			
		});
	}
	
	// 改变头部背景透明度
	if(screen.width > 900){
		var spotTop = $("#spot").offset().top-90;
		$(window).bind("scroll",function(){
			var topScroll=$(this).scrollTop();//当前窗口的滚动距离
			if(topScroll > spotTop){
				$(".header").css("background-color","rgba(255,255,255,1)");
				$(".header").css("box-shadow","0 0 10px 3px rgba(0,0,0,0.2)");
				$(".header").css("transition","all .8s");
			}else{
				$(".header").css("background-color","rgba(255,255,255,0.75)");
				$(".header").css("box-shadow","0 0 10px 3px rgba(0,0,0,0)");
				$(".index-header").css("background-color","rgba(255,255,255,0)");
				$(".index-header").css("box-shadow","0 0 10px 3px rgba(0,0,0,0)");
			}
		})
	};
	
	// 首页产品切换
	$(".case-item li").eq(0).addClass("active");
	$(".case-serve-all .case-serve").eq(0).addClass("active");
	$(".case-list-all>div").eq(0).show();
	$(".case-list-01 .case-list").eq(0).show();
	$(".case-list-02 .case-list").eq(0).show();
	$(".case-list-03 .case-list").eq(0).show();
	$(".case-list-04 .case-list").eq(0).show();
	$(".case-item li").hover(function() {
		$(".case-item li").eq($(this).index()).addClass("active").siblings().removeClass('active');
		$(".case-serve-all .case-serve").removeClass('active').eq($(this).index()).addClass("active");
		$(".case-list-all>div").hide().eq($(this).index()).show();
	});
	$(".case-serve li").click(function() {
		$(".case-serve li").eq($(this).index()).addClass("active").siblings().removeClass('active');
		$(".case-list-01 .case-list").hide().eq($(this).index()).show();
		$(".case-list-02 .case-list").hide().eq($(this).index()).show();
		$(".case-list-03 .case-list").hide().eq($(this).index()).show();
		$(".case-list-04 .case-list").hide().eq($(this).index()).show();
	});
	
	
	// 案例列表产品展示
	$(".case-item-bs li").eq(0).addClass("active");
	$(".case-serve-all-bs .case-serve-bs").eq(0).addClass("active");
	$(".case-item-bs li").click(function() {
		$(".case-item-bs li").eq($(this).index()).addClass("active").siblings().removeClass('active');
		$(".case-serve-all-bs .case-serve-bs").removeClass('active').eq($(this).index()).addClass("active");
	});
	
	// 评估&预约切换
	$(".estimate-item>li").eq(0).addClass("active");
	$(".estimate-list>li").eq(0).show();
	$(".estimate-item>li").click(function() {
		$(".estimate-item>li").eq($(this).index()).addClass("active").siblings().removeClass('active');
		$(".estimate-list>li").hide().eq($(this).index()).show();
	});
	
	// 改变选中状态
	$(".estimate-01 li").click(function() {
		$(".estimate-01 li").find("input").attr("checked",false);
		$(this).find("input").attr("checked",true);
	});
	$(".estimate-02 li").click(function() {
		$(".estimate-02 li").find("input").attr("checked",false);
		$(this).find("input").attr("checked",true);
	});
	
	// 服务
	$(".serve-nav li").click(function() {
		$(".serve-nav li").eq($(this).index()).addClass("active").siblings().removeClass('active');
		$(".serve-content .left .pull-txt").hide().eq($(this).index()).show();
	});
	
	// 友情链接
	$(".links-item li").hover(function() {
		$(".links-item li").eq($(this).index()).addClass("active").siblings().removeClass('active');
		$(".links-list li").hide().eq($(this).index()).show();
	});
	
	
	// 手机导航按钮
	$('.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');
	});
})