140 lines
4.7 KiB
JavaScript
140 lines
4.7 KiB
JavaScript
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: 'bullets',//指示点样式 bullets：圆点（默认）、fraction：分式、progressbar：进度条、custom：自定义
|
||
progressbarOpposite: false,//水平方向切换的swiper显示的是垂直进度条而垂直方向切换的swiper显示水平进度条
|
||
dynamicBullets: false,//当slide很多时，分页器小点的数量会部分隐藏。针对bullets
|
||
dynamicMainBullets: 2,//主展示的数量
|
||
hideOnClick :true,//点击时隐藏分页器
|
||
clickable :true,//点击分页器的指示点控制Swiper切换
|
||
},
|
||
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类名
|
||
}
|
||
}
|
||
});
|
||
|
||
|
||
// 首页产品切换
|
||
$(".product-items li").eq(0).addClass("active");
|
||
$(".product-classify li").click(function() {
|
||
$(".product-classify li").eq($(this).index()).addClass("active").siblings().removeClass('active');
|
||
$(".product-items li").removeClass('active').eq($(this).index()).addClass("active");
|
||
});
|
||
|
||
|
||
// 锚点效果
|
||
$('.memorabili-btn').click(function(){$('html,body').animate({scrollTop:$('#memorabili').offset().top}, 1000);});
|
||
$('.culture-btn').click(function(){$('html,body').animate({scrollTop:$('#culture').offset().top}, 800);});
|
||
$('.about-btn').click(function(){$('html,body').animate({scrollTop:$('#about').offset().top}, 600);});
|
||
|
||
// 大事记滚动
|
||
if(screen.width <= 768){
|
||
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($(".page-img img").src == null){
|
||
$(".page-img").css("width",0)
|
||
}
|
||
|
||
// 人才招聘切换
|
||
$(".join-list li").click(function() {
|
||
$(".join-list li").eq($(this).index()).toggleClass("active").siblings().removeClass('active');
|
||
});
|
||
|
||
|
||
// 产品图片切换
|
||
var productSwiper = new Swiper('.product-swiper',{
|
||
loop:true,//开启循环播放
|
||
speed: 1000,
|
||
autoplay: {//开启自动播放
|
||
delay:3000,
|
||
disableOnInteraction: false,//触摸后不会停止自动滚动
|
||
pauseOnMouseEnter: true,//鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换。
|
||
},
|
||
effect : 'fade',
|
||
fadeEffect: {
|
||
crossFade: true,
|
||
},
|
||
pagination: {//分页器
|
||
el: '.product-swiper .swiper-pagination',
|
||
type: 'bullets',
|
||
},
|
||
navigation: { //翻页
|
||
nextEl: '.product-swiper .swiper-button-next',
|
||
prevEl: '.product-swiper .swiper-button-prev',
|
||
},
|
||
});
|
||
|
||
// 手机导航按钮
|
||
$('.header-content .head-btn').click(function() {
|
||
if ($('.header-content .head-btn').attr('class') == 'head-btn cur') {
|
||
$('.header-content .head-btn').removeClass('cur');
|
||
$('.header-content .nav').removeClass('active');
|
||
} else {
|
||
$('.header-content .head-btn').addClass('cur');
|
||
$('.header-content .nav').addClass('active');
|
||
}
|
||
});
|
||
|
||
$(".top-nav li").click(function(){
|
||
|
||
})
|
||
})
|