348 lines
11 KiB
JavaScript
348 lines
11 KiB
JavaScript
jQuery(function($){
|
||
// banner轮播
|
||
var number = $('.banner-swiper .swiper-slide').length;
|
||
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 : '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: false,
|
||
live: true
|
||
});
|
||
wow.init();
|
||
};
|
||
// 首页新闻动态切换
|
||
$(".index-title-item>li").eq(0).addClass("active");
|
||
$(".index-news-all>div").eq(0).addClass("cur");
|
||
$(".index-title-item>li").click(function() {
|
||
$(".index-title-item>li").eq($(this).index()).addClass("active").siblings().removeClass('active');
|
||
$(".index-news-all>div").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
|
||
});
|
||
|
||
// 首页主营业务切换
|
||
$(".index-business-item>li").eq(0).addClass("active");
|
||
$(".index-business-list>li").eq(0).addClass("cur");
|
||
$(".index-business-item>li").click(function() {
|
||
$(".index-business-item>li").eq($(this).index()).addClass("active").siblings().removeClass('active');
|
||
$(".index-business-list>li").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
|
||
});
|
||
|
||
// 管理团队滚动
|
||
var teamSwiper = new Swiper('.team-swiper',{
|
||
loop:true,//开启循环播放
|
||
autoplay: {//开启自动播放
|
||
delay:3000,
|
||
disableOnInteraction: false,//触摸后不会停止自动滚动
|
||
pauseOnMouseEnter: true,//鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换。
|
||
},
|
||
pagination: {
|
||
el: '.team-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类名
|
||
}
|
||
}
|
||
});
|
||
|
||
// 大事记滚动
|
||
if(screen.width <= 980){
|
||
var memorabiliSwiper = new Swiper('.memorabili-swiper',{
|
||
loop:false,//开启循环播放
|
||
autoplay : {
|
||
delay:3000,
|
||
disableOnInteraction: false,
|
||
},
|
||
effect : 'fade',
|
||
fadeEffect: {
|
||
crossFade: true,
|
||
},
|
||
navigation: {
|
||
prevEl: '.memorabili-swiper .swiper-button-prev',
|
||
nextEl: '.memorabili-swiper .swiper-button-next',
|
||
},
|
||
|
||
})
|
||
}else{
|
||
var memorabiliSwiper = new Swiper('.memorabili-swiper',{
|
||
loop:false,//开启循环播放
|
||
autoplay: false,
|
||
slidesPerView : '4',
|
||
centeredSlides : false,
|
||
navigation: {
|
||
prevEl: '.memorabili-swiper .swiper-button-prev',
|
||
nextEl: '.memorabili-swiper .swiper-button-next',
|
||
},
|
||
on:{
|
||
slideChange: function(){
|
||
var a = this.activeIndex;
|
||
var b = a + 4;
|
||
var c = a - 1;
|
||
$(".memorabili-swiper").find(".swiper-slide").css("opacity",1);
|
||
$(".memorabili-swiper").find(".swiper-slide").eq(c).css("opacity",0);
|
||
$(".memorabili-swiper").find(".swiper-slide").eq(b).css("opacity",0);
|
||
},
|
||
},
|
||
|
||
})
|
||
}
|
||
// 主营业务滚动
|
||
if(screen.width <= 780){
|
||
var viewSwiper = new Swiper('.view-swiper', {
|
||
navigation: {
|
||
prevEl: '.preview .preview-arrow-prev',
|
||
nextEl: '.preview .preview-arrow-next',
|
||
},
|
||
thumbs: {
|
||
swiper: {
|
||
el: '.preview-swiper', //注意此处的设置方式
|
||
slidesPerView: 3,
|
||
watchSlidesVisibility: true,//防止不可点击
|
||
},
|
||
}
|
||
});
|
||
}else{
|
||
var viewSwiper = new Swiper('.view-swiper', {
|
||
navigation: {
|
||
prevEl: '.preview .preview-arrow-prev',
|
||
nextEl: '.preview .preview-arrow-next',
|
||
},
|
||
thumbs: {
|
||
swiper: {
|
||
el: '.preview-swiper', //注意此处的设置方式
|
||
watchSlidesVisibility: true,//防止不可点击
|
||
},
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
// // 回到顶部
|
||
// $('#toTop').click(function(){$('html,body').animate({scrollTop:$('#top').offset().top}, 600);});
|
||
|
||
// 走进蜀能锚点
|
||
if(screen.width <= 980){
|
||
$('.abstract-btn').click(function(){
|
||
$('html,body').animate({scrollTop:$('.abstract-bg').offset().top - 128}, 300);
|
||
$('.pull-item>li').removeClass("cur");
|
||
$(this).addClass("cur");
|
||
});
|
||
$('.speech-btn').click(function(){
|
||
$('html,body').animate({scrollTop:$('.speech-bg').offset().top - 128}, 300);
|
||
$('.pull-item>li').removeClass("cur");
|
||
$(this).addClass("cur");
|
||
});
|
||
$('.team-btn').click(function(){
|
||
$('html,body').animate({scrollTop:$('.team-bg').offset().top - 128}, 300);
|
||
$('.pull-item>li').removeClass("cur");
|
||
$(this).addClass("cur");
|
||
});
|
||
$('.organization-btn').click(function(){
|
||
$('html,body').animate({scrollTop:$('.organization-bg').offset().top - 128}, 300);
|
||
$('.pull-item>li').removeClass("cur");
|
||
$(this).addClass("cur");
|
||
});
|
||
$('.memorabilia-btn').click(function(){
|
||
$('html,body').animate({scrollTop:$('.memorabilia-bg').offset().top - 128}, 300);
|
||
$('.pull-item>li').removeClass("cur");
|
||
$(this).addClass("cur");
|
||
});
|
||
}else{
|
||
$('.abstract-btn').click(function(){
|
||
$('html,body').animate({scrollTop:$('.abstract-bg').offset().top - 147}, 600);
|
||
$('.pull-item>li').removeClass("cur");
|
||
$(this).addClass("cur");
|
||
});
|
||
$('.speech-btn').click(function(){
|
||
$('html,body').animate({scrollTop:$('.speech-bg').offset().top - 147}, 600);
|
||
$('.pull-item>li').removeClass("cur");
|
||
$(this).addClass("cur");
|
||
});
|
||
$('.team-btn').click(function(){
|
||
$('html,body').animate({scrollTop:$('.team-bg').offset().top - 147}, 600);
|
||
$('.pull-item>li').removeClass("cur");
|
||
$(this).addClass("cur");
|
||
});
|
||
$('.organization-btn').click(function(){
|
||
$('html,body').animate({scrollTop:$('.organization-bg').offset().top - 147}, 600);
|
||
$('.pull-item>li').removeClass("cur");
|
||
$(this).addClass("cur");
|
||
});
|
||
$('.memorabilia-btn').click(function(){
|
||
$('html,body').animate({scrollTop:$('.memorabilia-bg').offset().top - 147}, 600);
|
||
$('.pull-item>li').removeClass("cur");
|
||
$(this).addClass("cur");
|
||
});
|
||
}
|
||
|
||
|
||
|
||
// 团队风采滚动
|
||
if(screen.width <= 860){
|
||
var teamStyleSwiper = new Swiper('.team-style-swiper', {
|
||
// paginationClickable: true,
|
||
observer: true,
|
||
observeParents: true,
|
||
// initialSlide: swipIndex,
|
||
effect: 'coverflow',
|
||
centeredSlides: true,
|
||
spaceBetween: '1%',
|
||
slidesPerView: 2,
|
||
loop: true,
|
||
autoplay:true,
|
||
// autoplay: {
|
||
// disableOnInteraction: false,
|
||
// },
|
||
navigation: {
|
||
//
|
||
},
|
||
coverflowEffect: {
|
||
rotate: 0, //slide做3d旋转时Y轴的旋转角度
|
||
stretch: 30, //每个slide之间的拉伸值，越大slide靠得越紧。5.3.6 后可使用%百分比
|
||
depth: 140, //slide的位置深度。值越大z轴距离越远，看起来越小。
|
||
modifier: 1, //depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。
|
||
slideShadows: false,
|
||
},
|
||
on: {
|
||
transitionEnd: function () {
|
||
this.activeIndex
|
||
}
|
||
}
|
||
})
|
||
}else if(screen.width > 860 & screen.width <= 1280){
|
||
var teamStyleSwiper = new Swiper('.team-style-swiper', {
|
||
// paginationClickable: true,
|
||
observer: true,
|
||
observeParents: true,
|
||
// initialSlide: swipIndex,
|
||
effect: 'coverflow',
|
||
centeredSlides: true,
|
||
spaceBetween: '1%',
|
||
slidesPerView: 2,
|
||
loop: true,
|
||
autoplay:true,
|
||
// autoplay: {
|
||
// disableOnInteraction: false,
|
||
// },
|
||
navigation: {
|
||
//
|
||
},
|
||
coverflowEffect: {
|
||
rotate: 0, //slide做3d旋转时Y轴的旋转角度
|
||
stretch: 100, //每个slide之间的拉伸值，越大slide靠得越紧。5.3.6 后可使用%百分比
|
||
depth: 40, //slide的位置深度。值越大z轴距离越远，看起来越小。
|
||
modifier: 1, //depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。
|
||
slideShadows: false,
|
||
},
|
||
on: {
|
||
transitionEnd: function () {
|
||
this.activeIndex
|
||
}
|
||
}
|
||
})
|
||
}else{
|
||
var teamStyleSwiper = new Swiper('.team-style-swiper', {
|
||
// paginationClickable: true,
|
||
observer: true,
|
||
observeParents: true,
|
||
// initialSlide: swipIndex,
|
||
effect: 'coverflow',
|
||
centeredSlides: true,
|
||
spaceBetween: '1%',
|
||
slidesPerView: 2,
|
||
loop: true,
|
||
autoplay:true,
|
||
// autoplay: {
|
||
// disableOnInteraction: false,
|
||
// },
|
||
navigation: {
|
||
//
|
||
},
|
||
coverflowEffect: {
|
||
rotate: 0, //slide做3d旋转时Y轴的旋转角度
|
||
stretch: 100, //每个slide之间的拉伸值，越大slide靠得越紧。5.3.6 后可使用%百分比
|
||
depth: 120, //slide的位置深度。值越大z轴距离越远，看起来越小。
|
||
modifier: 1, //depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。
|
||
slideShadows: false,
|
||
},
|
||
on: {
|
||
transitionEnd: function () {
|
||
this.activeIndex
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
// 加入我们切换
|
||
$('.join-item').click(function() {
|
||
if($(this).parent().attr('class') == 'wow fadeInUp animated active'){
|
||
$('.join-list>li').removeClass('active');
|
||
$('.join-list>li').find(".more").html("展开详情")
|
||
}else{
|
||
$('.join-list>li').removeClass('active')
|
||
$(this).parent().addClass('active')
|
||
$('.join-list>li').find(".more").html("展开详情")
|
||
$('.join-list>li.active').find(".more").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');
|
||
});
|
||
})
|