2022-01-20 11:39:57 +00:00
|
|
|
|
jQuery(function($){
|
|
|
|
|
|
monitorWindow();
|
|
|
|
|
|
// 窗体改变
|
|
|
|
|
|
$(window).resize(function(){//监听窗口大小的改变
|
|
|
|
|
|
monitorWindow();
|
|
|
|
|
|
})
|
2022-01-20 12:12:22 +00:00
|
|
|
|
prependEv();
|
|
|
|
|
|
})
|
|
|
|
|
|
function creatswiper(){
|
2022-01-20 11:39:57 +00:00
|
|
|
|
// banner轮播
|
|
|
|
|
|
var bannerSwiper = new Swiper('.banner-swiper',{
|
2022-01-20 12:12:22 +00:00
|
|
|
|
loop:true,//开启循环播放
|
2022-01-20 11:39:57 +00:00
|
|
|
|
autoplay: {//开启自动播放
|
|
|
|
|
|
delay:3000,
|
|
|
|
|
|
disableOnInteraction: false,//触摸后不会停止自动滚动
|
|
|
|
|
|
pauseOnMouseEnter: true,//鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换。
|
|
|
|
|
|
},
|
|
|
|
|
|
direction : 'vertical',//轮播切换方向默认向左：horizontal、向右：vertical
|
|
|
|
|
|
// height: 400,//slide高度
|
|
|
|
|
|
autoHeight: true, //高度随内容变化
|
|
|
|
|
|
slidesPerView:4,//显示个数
|
|
|
|
|
|
pagination: {//分页器
|
|
|
|
|
|
el: '.swiper-pagination',
|
|
|
|
|
|
type: 'bullets',//指示点样式 bullets：圆点（默认）、fraction：分式、progressbar：进度条、custom：自定义
|
|
|
|
|
|
progressbarOpposite: false,//水平方向切换的swiper显示的是垂直进度条而垂直方向切换的swiper显示水平进度条
|
|
|
|
|
|
dynamicBullets: false,//当slide很多时，分页器小点的数量会部分隐藏。针对bullets
|
|
|
|
|
|
dynamicMainBullets: 2,//主展示的数量
|
|
|
|
|
|
hideOnClick :true,//点击时隐藏分页器
|
|
|
|
|
|
clickable :true,//点击分页器的指示点控制Swiper切换
|
|
|
|
|
|
// bulletClass : 'my-bullet',//需设置.my-bullet样式
|
|
|
|
|
|
// bulletActiveClass: 'my-bullet-active',//当前活动块的指示小点的类名。需设置.my-bullet-active样式
|
|
|
|
|
|
renderBullet: function (index, className) {
|
|
|
|
|
|
switch(index){
|
|
|
|
|
|
case 0:text='壹';break;
|
|
|
|
|
|
case 1:text='贰';break;
|
|
|
|
|
|
case 2:text='叁';break;
|
|
|
|
|
|
case 3:text='肆';break;
|
|
|
|
|
|
case 4:text='伍';break;
|
|
|
|
|
|
case 5:text='六';break;
|
|
|
|
|
|
case 6:text='柒';break;
|
|
|
|
|
|
case 7:text='捌';break;
|
|
|
|
|
|
case 8:text='玖';break;
|
|
|
|
|
|
case 9:text='拾';break;
|
|
|
|
|
|
}
|
|
|
|
|
|
return '<span class="' + className + '">' + text + '</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类名
|
|
|
|
|
|
},
|
|
|
|
|
|
slideChangeTransitionStart: function(){
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
2022-01-20 12:12:22 +00:00
|
|
|
|
}
|
2022-01-20 11:39:57 +00:00
|
|
|
|
function monitorWindow(){
|
|
|
|
|
|
let slideHeight = '';
|
|
|
|
|
|
// 获取视图窗口的高度
|
|
|
|
|
|
let clientHeight = $(window).height();
|
|
|
|
|
|
// 获取头部的高度
|
|
|
|
|
|
let headHeight = $('.head-box img').height();
|
|
|
|
|
|
// 底部内容高度
|
|
|
|
|
|
let contentHeight = clientHeight-headHeight;
|
2022-01-20 12:12:22 +00:00
|
|
|
|
}
|
