jQuery(function($){ monitorWindow(); // 窗体改变 $(window).resize(function(){//监听窗口大小的改变 monitorWindow(); }) prependEv(); }) function creatswiper(){ // banner轮播 var bannerSwiper = new Swiper('.banner-swiper',{ loop:true,//开启循环播放 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 '' + text + ''; }, }, 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(){ }, } }) } function monitorWindow(){ let slideHeight = ''; // 获取视图窗口的高度 let clientHeight = $(window).height(); // 获取头部的高度 let headHeight = $('.head-box img').height(); // 底部内容高度 let contentHeight = clientHeight-headHeight; }