class Config{ constructor(){ this.lenisInit();//初始化lenis //this.fixedScrollHeader();//header下滚上滚效果 this.accordion();//手风琴 this.tab();//tab切换 } /** * 获取窗口尺寸 */ get viewport(){ let width = $(window).innerWidth(); let height = $(window).innerHeight(); let aspectRatio = width / height; return { width, height, aspectRatio }; } /** * 获取指定随机数 * @param {*} min * @param {*} max * @returns */ randomNum(min,max){ let num=Math.floor(Math.random() * (max - min + 1)) + min; return num; } //初始化lenis lenisInit(){ this.initSmoothScrolling = () => { this.lenis = new Lenis({ mouseMultiplier: 0.7, smooth: true, smoothTouch:false }); this.lenis.on('scroll', (e) => { ScrollTrigger.update(); //if(e.direction=='-1'){ if(e.scroll>200){$('header').addClass('Fixed')}else{$('header').removeClass('Fixed')} //} }); const scrollFn = (time) => { this.lenis.raf(time); requestAnimationFrame(scrollFn); }; requestAnimationFrame(scrollFn); }; this.initSmoothScrolling(); let that=this; $(document).on('mouseenter','*[data-lenis-scroll]',function(){ that.lenis.destroy(); cancelAnimationFrame(that.animationFrame); }) $(document).on('mouseleave','*[data-lenis-scroll]',function(){ that.initSmoothScrolling(); }) // if($('*[data-lenis-scroll]').length>0){ // let that=this; // $('*[data-lenis-scroll]').hover(function(e){ // if(e.type=='mouseenter'){ // that.lenis.destroy(); // cancelAnimationFrame(that.animationFrame); // }else{ // that.initSmoothScrolling(); // } // }) // } } /** * 跳转 * @param {*} e //元素class,id/number(距离) */ setScrollTo(e){ this.lenis.scrollTo(e) } /** * header下滚上滚效果 */ fixedScrollHeader(){ let showAnim = gsap.from('header', { yPercent: -130, paused: true, duration: 0.3 }).progress(1); ScrollTrigger.create({ start: "top top", end: 99999, onUpdate: (self) => { self.direction === -1 ? showAnim.play() : showAnim.reverse() } }); } /** * 包装外层元素 * @param {*} elems 需要包装的元素 * @param {*} wrapType 包装外层为什么(div) * @param {*} wrapClass 包装外层样式名 * @param {*} wrapStyle 包装外层样式 */ wrapElements(elems, wrapType, wrapClass,wrapStyle){ elems.forEach(char => { const wrapEl = document.createElement(wrapType); wrapEl.classList = wrapClass; wrapEl.style=wrapStyle; char.parentNode.appendChild(wrapEl); wrapEl.appendChild(char); }); } /** * 分享 * @param {*} e 类型 * @returns */ share(e){ if(e=='weibo'){ window.open('http://v.t.sina.com.cn/share/share.php?title='+encodeURIComponent(document.title)+'&url='+encodeURIComponent(locations.href)+'&source=bookmark','_blank','width=450,height=400'); }else if(e=='weixin'){ if($('#lhCode').length>0){ return false; } $.getScript('/style/js/createEwm.js',function(){ let _html=`

分享到 - 微信

`; $('body').append(_html); $('#lhCode>.ewm').qrcode(locations.href); $('#lhCode>h2>i').click(function(){ $('.lh-ewm-layer').remove(); }); }) }else if(e=='kongjian'){ window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+encodeURIComponent(locations.href)+'&pics=&summary='+encodeURIComponent(document.title),'_blank','width=450,height=400'); }else if(e=='qqhy'){ window.open('http://connect.qq.com/widget/shareqq/index.html?url='+encodeURIComponent(locations.href)+'&desc='+encodeURIComponent(document.title)+'&pics=&site=','_blank','width=816,height=666,left=40,top=80'); } } /** * 手风琴 * current:当前默认显示第几个 */ accordion(){ if($('.lhAcc').length<1){ return; } $('.lhAcc').each((i,v)=>{ let _current=$(v).data('current'); if(_current !=undefined){ $(v).children().eq(_current).addClass('on'); } $(v).find('.acc-hd').click(function(){ let _p=$(this).parent(); if(_p.hasClass('on')){ _p.removeClass('on'); }else{ _p.addClass('on').siblings().removeClass('on'); } }) }) } /** * tab切换 * current:当前默认显示第几个 * event:切换事件:click||mouseover */ tab(){ let that=this; if($('.lhTab').length<1){ return; } $('.lhTab').each((i,v)=>{ let _current=$(v).data('current')||0; $(v).find('.tab-hd>*').eq(_current).addClass('on'); $(v).find('.tab-bd>*').eq(_current).addClass('on'); let _hd=$(v).find('.tab-hd>*'), _event=$('.lhTab').data('event')||'click'; _hd.on(_event,function(e){ let _idx=$(this).index(); $(this).addClass('on').siblings().removeClass('on'); $(v).find('.tab-bd>*').eq(_idx).addClass('on').siblings().removeClass('on'); }) }) } /** * 数字递增变化 */ digitalIncreasing(e){ let to=e.data('to'),speed=e.data('speed')||2000,refreshInterval=100,loops = Math.ceil(speed / refreshInterval),increment = Math.ceil(to / loops); var n,num=0; n = setInterval(function(){ num+=increment; e.text(num); if(num>=to){ e.text(to); clearInterval(n); } e.removeClass('power') },refreshInterval); } /** * 弹窗过渡动画 */ svgPageAn(_idx=0){ let paths={ step1:[/**左右 */ { unfilled: 'M 0 0 h 0 c 0 50 0 50 0 100 H 0 V 0 Z', inBetween: 'M 0 0 h 33 c -30 54 113 65 0 100 H 0 V 0 Z', filled: 'M 0 0 h 100 c 0 50 0 50 0 100 H 0 V 0 Z', }, { /**上下 */ unfilled:'M 0 100 V 100 Q 50 100 100 100 V 100 z', inBetween:'M 0 100 V 50 Q 50 0 100 50 V 100 z', filled:'M 0 100 V 0 Q 50 0 100 0 V 100 z' } ], step2:[ {/**左右 */ filled: 'M 100 0 H 0 c 0 50 0 50 0 100 h 100 V 50 Z', inBetween: 'M 100 0 H 50 c 28 43 4 81 0 100 h 50 V 0 Z', unfilled: 'M 100 0 H 100 c 0 50 0 50 0 100 h 0 V 0 Z', }, {/**上下 */ unfilled:'M 0 0 V 0 Q 50 0 100 0 V 0 z', inBetween:'M 0 0 V 50 Q 50 0 100 50 V 0 z', filled:'M 0 0 V 100 Q 50 100 100 100 V 0 z' } ] }, overlayPath=$('.overlay__path'); this.pageSwitchTimeline = gsap.timeline({ paused: true, onStart:()=>{ this._pageLayerRun=false; } }) .set(overlayPath, { attr: { d: paths.step1[_idx].unfilled } }) .to(overlayPath, { duration: 0.8, ease: 'power3.in', attr: { d: paths.step1[_idx].inBetween } }, 0) .to(overlayPath, { duration: 0.2, ease: 'power1', attr: { d: paths.step1[_idx].filled }, onComplete: () =>{ this._pageLayerRun=true; if(this._pageAn){ this._pageAn(); } } }) .set(overlayPath, { attr: { d: paths.step2[_idx].filled }, onReverseComplete:()=>{ this._pageLayerRun=true; if(this._pageAn){ this._pageAn(); } } }) .to(overlayPath, { duration: 0.15, ease: 'sine.in', attr: { d: paths.step2[_idx].inBetween } }) .to(overlayPath, { duration: 1, ease: 'power4', attr: { d: paths.step2[_idx].unfilled } }); } /** * 页面元素动画 */ elementAn(){ let _an=[ /*普通元素动画*/ (e)=>{ // gsap.set(e.element, { // 'will-change': 'opacity,transform' // }); let _tween=gsap.from(e.element,e.duration?e.duration:0.5,{opacity: 0,xPercent:e.pos?e.pos[0]:0,yPercent:e.pos?e.pos[1]:60,scaleX:e.scale?e.scale[0]:1,scaleY:e.scale?e.scale[1]:1,delay:e.delay||0,ease:e.ease?e.ease:'power1',stagger: e.stagger?e.stagger:0, onStart:()=>{ if(e.element.find('.power').length>0){ this.digitalIncreasing(e.element.find('.power')); } }}); this.createTrigger(e.element,_tween,e.start,e.end).animation; }, /*拆分文本动画 */ (e)=>{ gsap.set(e.element, { 'will-change': 'opacity' }); let _tween=gsap.from(e.element,e.duration?e.duration:0.5,{opacity: 0,stagger: e.stagger?e.stagger:0.1,ease:e.ease?e.ease:'power1'}); this.createTrigger(e.element,_tween,e.start,e.end).animation; }, (e)=>{ gsap.set(e.element, { 'will-change': 'opacity, transform' }); let _tween=gsap.from(e.element,e.duration?e.duration:0.5,{opacity: 0,scale: 0.6,rotationZ: () => gsap.utils.random(-20,20),stagger: e.stagger?e.stagger:0.1,ease:e.ease?e.ease:'power4'}); this.createTrigger(e.element,_tween,e.start,e.end).animation; }, (e)=>{ gsap.set(e.element, { 'will-change': 'opacity, transform' }); let _tween=gsap.from(e.element,e.duration?e.duration:0.5,{ xPercent: () => gsap.utils.random(-200,200), yPercent: () => gsap.utils.random(-150,150),opacity:0,stagger: e.stagger?e.stagger:{each: 0.01, grid: 'auto', from: 'random'},ease:e.ease?e.ease:'power1.inOut'}); this.createTrigger(e.element,_tween,e.start,e.end).animation; } ] $('[data-text]').each((i,v)=>{ let _split=$(v).data('split'), _v=$(v); if(_split!=undefined){//不是拆分文本 _v=$(v).children(); } let _idx=$(v).attr('data-idx')||0, _stagger=$(v).attr('data-stagger')||null, _start=$(v).attr('data-start')||null, _end=$(v).attr('data-end')||null, _ease=$(v).attr('data-ease')||null, _pos=$(v).attr('data-pos')||null, _scale=$(v).attr('data-scale')||null, _delay=$(v).attr('data-delay')||null, _duration=$(v).attr('data-duration')||null; if(_pos){ _pos=_pos.split(','); if(_pos.length<=1){ _pos[1]=0; } } if(_scale){ _scale=_scale.split(','); if(_scale.length<=1){ _scale[1]=_scale[0]; } } if(_an[_idx]){ _an[_idx]({element:_v,stagger:_stagger,start:_start,end:_end,ease:_ease,pos:_pos,scale:_scale,delay:_delay,duration:_duration}); } }) } /*scrollTriggerCreate*/ createTrigger(trigger,animation,_start,_end){ return ScrollTrigger.create({ trigger: trigger, start: _start?_start:"center bottom", end: _end?_end:"bottom bottom", animation: animation }) } /** * 页面元素滚动关联动画 */ elementScrollAn(){ let _an=[ (e)=>{ gsap.set(e.element, { 'will-change': e.change?e.change:'opacity, transform', transformOrigin:e.transformOrigin?e.transformOrigin:'50% 50%', scaleX:e.setScale?e.setScale[0]:1, scaleY:e.setScale?e.setScale[1]:1, opacity:e.setOpacity?e.setOpacity:1, rotation:e.setRotation?e.setRotation:0, xPercent:e.setXPercent?e.setXPercent:0, yPercent:e.setYPercent?e.setYPercent:0, skewX:e.setSkewX?e.setSkewX:0, skewY:e.setSkewY?e.setSkewY:0, }); if(e.setRotation3d){ gsap.set(e.element[0].parentNode, { perspective: 1000 }); gsap.set(e.element, { rotationX:e.setRotation3d[0]?e.setRotation3d[0]:0, rotationY:e.setRotation3d[1]?e.setRotation3d[1]:0, rotationZ:e.setRotation3d[2]?e.setRotation3d[2]:0, }); }else{ gsap.set(e.element, { rotation:e.setRotation?e.setRotation:0, }); } if(e.rotation3d){ gsap.to(e.element,{ scaleX:e.scale?e.scale[0]:1, scaleY:e.scale?e.scale[1]:1, xPercent:e.xPercent?e.xPercent:0, yPercent:e.yPercent?e.yPercent:0, opacity:e.opacity?e.opacity:1, rotationX:e.rotation3d[0]?e.rotation3d[0]:0, rotationY:e.rotation3d[1]?e.rotation3d[1]:0, rotationZ:e.rotation3d[2]?e.rotation3d[2]:0, skewX:e.skewX?e.skewX:0, skewY:e.skewY?e.skewY:0, stagger:e.stagger?e.stagger:0, scrollTrigger:{ trigger: e.trigger?e.trigger:e.element, start: e.start?e.start:'center bottom', end: e.end?e.end:'bottom center', scrub: true }, }) }else{ gsap.to(e.element,{ scaleX:e.scale?e.scale[0]:1, scaleY:e.scale?e.scale[1]:1, xPercent:e.xPercent?e.xPercent:0, yPercent:e.yPercent?e.yPercent:0, opacity:e.opacity?e.opacity:1, rotation:e.rotation?e.rotation:0, skewX:e.skewX?e.skewX:0, skewY:e.skewY?e.skewY:0, stagger:e.stagger?e.stagger:0, scrollTrigger:{ trigger: e.trigger?e.trigger:e.element, start: e.start?e.start:'center bottom', end: e.end?e.end:'bottom center', scrub: true }, onStart:()=>{ if(e.element.find('.power').length>0){ this.digitalIncreasing(e.element.find('.power')); } } }) } }, ] $('[data-scrollAn]').each((i,v)=>{ let _split=$(v).data('split'), _v=$(v); if(_split!=undefined){//不是拆分文本 _v=$(v).children(); } let _idx=$(v).attr('data-idx')||0, _stagger=$(v).attr('data-stagger')||null, _start=$(v).attr('data-start')||null, _end=$(v).attr('data-end')||null, _scale=$(v).attr('data-scale')||null, _trigger=$(v).attr('data-trigger')||null, _opacity=$(v).attr('data-opacity')||null, _rotation=$(v).attr('data-rotation')||null, _xPercent=$(v).attr('data-x')||null, _yPercent=$(v).attr('data-y')||null, _skewX=$(v).attr('data-skewX')||null, _skewY=$(v).attr('data-skewY')||null, _change=$(v).attr('data-change')||null, _setScale=$(v).attr('data-setScale')||null, _setOpacity=$(v).attr('data-setOpacity')||null, _setRotation=$(v).attr('data-setRotation')||null, _setXPercent=$(v).attr('data-setX')||null, _setYPercent=$(v).attr('data-setY')||null, _setSkewX=$(v).attr('data-setSkewX')||null, _setSkewY=$(v).attr('data-setSkewY')||null, _rotation3d=$(v).attr('data-rotation3d')||null, _setRotation3d=$(v).attr('data-setRotation3d')||null, _transformOrigin=$(v).attr('data-transformOrigin')||null; if(_scale){ _scale=_scale.split(','); if(_scale.length<=1){ _scale[1]=_scale[0]; } } if(_setScale){ _setScale=_setScale.split(','); if(_setScale.length<=1){ _setScale[1]=_setScale[0]; } } if(_rotation3d){ _rotation3d=_rotation3d.split(','); } if(_setRotation3d){ _setRotation3d=_setRotation3d.split(','); } if(_an[_idx]){ _an[_idx]({element:_v,stagger:_stagger,start:_start,end:_end,scale:_scale,trigger:_trigger,opacity:_opacity,change:_change,setScale:_setScale,setOpacity:_setOpacity,rotation:_rotation,setRotation:_setRotation,xPercent:_xPercent,yPercent:_yPercent,setXPercent:_setXPercent,setYPercent:_setYPercent,skewX:_skewX,skewY:_skewY,setSkewX:_setSkewX,setSkewY:_setSkewY,rotation3d:_rotation3d,setRotation3d:_setRotation3d,transformOrigin:_transformOrigin}); } }) } } class App{ _config=new Config();//公共方法 swiperJson={};//轮播存放json _pageLayerRun=true;//弹窗动画控制参数 constructor(){ this.init(); } /** * 初始化 */ init(){ this.banners();//轮播 this.definedAn();//自定义动画 this._config.elementAn();//页面元素动画 this._config.elementScrollAn();//页面元素滚动关联动画 this.mouseFollow();//鼠标跟随动画 } /** * 自定义动画 */ definedAn(){ /*导航*/ $('.lh-nav>*').hover(function(e){ if($(this).data('type')=='168'){//产品中心 if(e.type=='mouseenter'){ $('header').addClass('Black proToggle'); }else{ $('header').removeClass('proToggle'); } }else{ if($(this).children('dl').length>0){ if(e.type=='mouseenter'){ $(this).addClass('toggle'); $('header').addClass('Black'); }else{ $(this).removeClass('toggle'); } } } }); $('header').hover(function(e){ if(e.type=='mouseleave'){ $('header').removeClass('Black'); $('header').removeClass('proToggle'); } }); /*导航-》产品*/ $('.nav-pro-item>*').hover(function(){ $(this).addClass('on').siblings().removeClass('on'); }); $('.nav-pro-two>*').hover(function(){ $(this).addClass('on').siblings().removeClass('on'); }); /*产品中心->筛选*/ $('.filter-two>*').hover(function(){ $(this).addClass('on').siblings().removeClass('on'); }); /**首页 */ if($('.page-loading').length>0){ gsap.set('header',{ yPercent:-100 }) let _lottiePlayer=$('.player')[0]; _lottiePlayer.addEventListener('complete',()=>{ gsap.to('.page-loading',{ 'clip-path': 'inset(0 0 100% 0)', ease:'Power1.easeInOut', onComplete:()=>{ /**header */ gsap.to('header',0.4,{ ease:'Power1.easeInOut', yPercent:0, onComplete:()=>{ let _bannerSircle='.index-banner-bottom circle'; gsap.to(_bannerSircle,4,{ 'stroke-dashoffset':0, ease:'Power1.easeOut', repeat:-1, onRepeat:()=>{ //console.log('onRepeat'); if(this.swiperJson['.index-banner'])this.swiperJson['.index-banner'].slideNext() } }); } }) } }) }) } /**产品应用 */ if($('.app-nav').length>0){ $('.nav-toggle').click(function(){ let _this=$(this).parent(); if(_this.hasClass('toggle')){ _this.removeClass('toggle'); $(this).text('显示全部'); }else{ _this.addClass('toggle'); $(this).text('收起'); } }) } if(this._config.viewport.width<=1024){ $('.filter-select>*>a').click(function(){ return false; }) $('.filter-two>*>a').click(function(){ if($(this).next('.filter-three').length>0){ return false; } }) } } /**添加/移除class */ toggleClass(e){ if($('body').hasClass(e)){ $('body').removeClass(e); }else{ $('body').addClass(e); } } /** * 鼠标跟随动画 */ mouseFollow(){ let _learn_more=$('.learn-more-btn'), _lottiePlayer=$('.lh-mouse .learn-more')[0], _learn_gsap; _learn_more.on("mouseenter",function(){ _learn_gsap=gsap.to($('.lh-mouse .learn-more'), 1,{opacity:1,ease:Power1.easeOut}); _lottiePlayer.play(); }); _learn_more.on("mouseleave",function(){ _learn_gsap.timeScale(100).reverse(); _lottiePlayer.stop(); }); $('body').on('mousemove',function(e){ var clientX=e.clientX,clientY=e.clientY; gsap.to($('.lh-mouse'), .5,{x:clientX,y:clientY}); }) } /*打开弹窗*/ openLayer(e){ if(e.type=='open'){//打开弹窗 $('body').addClass('overflow'); if(e.url && $('#ajaxUrl').length>0){ $('#ajaxUrl').load(e.url+'?ajax=true'); } gsap.to($(e.boxCell),{ opacity:1, 'pointer-events':'auto' }) }else{//关闭弹窗 $('body').removeClass('overflow'); gsap.to($(e.boxCell),0,{ opacity:0, 'pointer-events':'none' }) } } /** * 再次封装swiper * @param {*} e * @returns */ swiperBanner(e={}){ let opt=$.extend({ boxCell:'.lh-banner', paginationEl:'.hd', paginationType:'bullets', paginationBulletElement:'li', paginationDynamicBullets:false, paginationDynamicMainBullets:1, paginationClickable:true, paginationRenderBullet:null, paginationBulletActiveClass:'on', stopOnLastSlide:true, slidesPerView:1, spaceBetween:0, speed:750, loop:false, direction:'horizontal', initialSlide:0, effect:'slide', mousewheel:false, nextEl:'.next', prevEl:'.prev', noSwipingClass:'stop-swiping', on:null, observer:true, observeParents:true, observeSlideChildren:true, parallax:true, disableOnInteraction:false, mainCell:'.swiper-wrapper', autoPage:true, autoPlay:false, delay:4500, stopOnLastSlide:false, disableOnInteraction:false, hashNavigation:false, slidesPerColumn:1, grabCursor:false, loopedSlides:1, freeMode:false, nested:false, scrollbar:'.swiper-scrollbar', stop:false, centeredSlides:false, releaseOnEdges:false, draggable:false, eventsTarged:'.i', loopAdditionalSlides:0 },e); if($(opt.boxCell).find('.next').length>0){ var nextEl = $(opt.boxCell).find('.next'),prevEl = $(opt.boxCell).find('.prev'); }else{ var nextEl =opt.nextEl,prevEl =opt.prevEl; } if(opt.autoPlay){ opt.autoPlay ={ delay:opt.delay, stopOnLastSlide:opt.stopOnLastSlide, disableOnInteraction:opt.disableOnInteraction } }else{ opt.autoPlay=false; } if(opt.mousewheel){ opt.mousewheel={eventsTarged:opt.eventsTarged}; if(opt.releaseOnEdges){ opt.mousewheel['releaseOnEdges']=opt.releaseOnEdges; } } let _swiper=new Swiper(opt.boxCell,{ parallax : opt.parallax, slidesPerView:opt.slidesPerView, initialSlide :opt.initialSlide, pagination : { el : opt.paginationEl, type:opt.paginationType, bulletElement:opt.paginationBulletElement, dynamicBullets:opt.paginationDynamicBullets, dynamicMainBullets:opt.paginationDynamicMainBullets, clickable:opt.paginationClickable, renderBullet:opt.paginationRenderBullet, bulletActiveClass:opt.paginationBulletActiveClass }, speed:opt.speed, loop:opt.loop, effect : opt.effect, spaceBetween:opt.spaceBetween, navigation: { nextEl: nextEl, prevEl: prevEl, }, direction:opt.direction, mousewheel:opt.mousewheel, noSwipingClass:opt.noSwipingClass, on:opt.on, observeParents:opt.observeParents, observer:opt.observer, autoplay:opt.autoPlay, stopOnLastSlide:opt.stopOnLastSlide, disableOnInteraction:opt.disableOnInteraction, hashNavigation:opt.hashNavigation, slidesPerColumn:opt.slidesPerColumn, grabCursor:opt.grabCursor, //loopedSlides:opt.loopedSlides, freeMode:opt.freeMode, nested:opt.nested, scrollbar:{ el:opt.scrollbar, draggable:opt.draggable }, lazy: { loadPrevNext: true, }, observeSlideChildren:opt.observeSlideChildren, centeredSlides:opt.centeredSlides, loopAdditionalSlides:opt.loopAdditionalSlides, // touchAngle:25, // threshold:50 }) if(opt.stop){ $(opt.boxCell).mouseenter(function () { _swiper.autoplay.stop(); }) $(opt.boxCell).mouseleave(function () { _swiper.autoplay.start(); }) } return _swiper; } /** * 循环banner开启轮播 */ banners(){ let that=this; this.bannersBefore(); $('.l-banner').each((i,v)=>{ let boxCell='.'+$(v)[0].className.split(' ')[0], length=$(v).find('.swiper-slide').length, view=$(v).attr('data-view')||1, webView=$(v).attr('data-webView')||1, loopAdditionalSlides=$(v).attr('data-loopAdditionalSlides')||0, autoplay=$(v).attr('data-autoplay')||false, delay=Number($(v).attr('data-delay'))||4500, speed=Number($(v).attr('data-speed'))||750, initialSlide=Number($(v).attr('data-initialSlide'))||0, paginationEl='', loop=$(v).attr('data-loop')||false, loopedSlides=$(v).attr('data-loopedSlides')||1, prev='', next='', direction=$(v).attr('data-direction')||'horizontal',//horizontal||vertical effect=$(v).attr('data-effect')||'slide', stop=$(v).attr('data-stop')||false, paginationType=$(v).attr('data-paginationType')||'bullets', centeredSlides=$(v).attr('data-centeredSlides')||false, mousewheel=$(v).attr('data-mousewheel')||false, hashNavigation=$(v).attr('data-hashNavigation')||false, freeMode=$(v).attr('data-freeMode')||false, draggable=$(v).attr('data-draggable')||false, releaseOnEdges=$(v).attr('data-releaseOnEdges')||false, noSwipingClass=$(v).attr('data-noSwipingClass')||'stop-swiping', //eventsTarged=$(v).data('eventsTarged')||'.index-banner', paginationRenderBullet=null; if(this._config.viewport.width<=1024){ view=webView; } if($(v).find('.bannerHd').length>0){ paginationEl = '.'+$(v).find('.bannerHd')[0].className.split(' ')[0]; $(v).find('.bannerHd').hide(); }else if($(v).closest('.bannerBox').find('.bannerHd').length>0){ paginationEl = '.'+$(v).closest('.bannerBox').find('.bannerHd')[0].className.split(' ')[0]; $(v).closest('.bannerBox').find('.bannerHd').hide(); } if($(v).find('.bannerBtn').length>0){ if($(v).find('.bannerBtn .prevs').length>0)prev = '.'+$(v).find('.bannerBtn .prevs')[0].className.split(' ')[0]; if($(v).find('.bannerBtn .nexts').length>0)next = '.'+$(v).find('.bannerBtn .nexts')[0].className.split(' ')[0]; $(v).find('.bannerBtn').hide(); }else if($(v).closest('.bannerBox').find('.bannerBtn').length>0){ if($(v).closest('.bannerBox').find('.bannerBtn .prevs').length>0)prev = '.'+$(v).closest('.bannerBox').find('.bannerBtn .prevs')[0].className.split(' ')[0]; if($(v).closest('.bannerBox').find('.bannerBtn .nexts').length>0)next = '.'+$(v).closest('.bannerBox').find('.bannerBtn .nexts')[0].className.split(' ')[0]; $(v).closest('.bannerBox').find('.bannerBtn').hide(); } if($(v).find('.bannerNum').length>0){ $(v).find('.bannerNum').hide(); }else if($(v).closest('.bannerBox').find('.bannerNum').length>0){ $(v).closest('.bannerBox').find('.bannerNum').hide(); } that.setBannerNum(v); if(length>view||(view=='auto'&&length>1)){ let _swiper=this.swiperBanner({ boxCell:boxCell, slidesPerView:view, autoPlay:autoplay?true:false, delay:delay, speed:speed, paginationEl:paginationEl, loop:loop?true:false, loopedSlides:loopedSlides, prevEl:prev, nextEl:next, effect:effect, direction:direction, stop:stop?true:false, noSwipingClass:noSwipingClass, paginationType:paginationType, centeredSlides:centeredSlides?true:false, mousewheel:mousewheel?true:false, hashNavigation:hashNavigation?true:false, freeMode:freeMode?true:false, draggable:draggable?true:false, releaseOnEdges:releaseOnEdges?true:false, paginationRenderBullet:paginationRenderBullet, initialSlide:initialSlide, loopAdditionalSlides:loopAdditionalSlides, on:{ slideChangeTransitionStart(){ let _index=this.realIndex; that.setBannerNum(this); if(boxCell=='.history-cont'){ $('.history-hd .bd li').eq(_index).addClass('on').siblings().removeClass('on'); if(that.swiperJson['.history-hd'])that.swiperJson['.history-hd'].slideTo(_index-1); } if(boxCell=='.honor-title'){ $('.honor-hd .bd li').eq(_index).addClass('on').siblings().removeClass('on'); if(that.swiperJson['.honor-hd'])that.swiperJson['.honor-hd'].slideTo(_index-1); if(that.swiperJson['.honor-bd'])that.swiperJson['.honor-bd'].slideTo(_index); } } } }) if($(v).find('.bannerBtn').length>0){ $(v).find('.bannerBtn').show(); }else if($(v).closest('.bannerBox').find('.bannerBtn').length>0){ $(v).closest('.bannerBox').find('.bannerBtn').show(); } if($(v).find('.bannerHd').length>0){ $(v).find('.bannerHd').show(); }else if($(v).closest('.bannerBox').find('.bannerHd').length>0){ $(v).closest('.bannerBox').find('.bannerHd').show(); } if($(v).find('.bannerNum').length>0){ $(v).find('.bannerNum').show(); }else if($(v).closest('.bannerBox').find('.bannerNum').length>0){ $(v).closest('.bannerBox').find('.bannerNum').show(); } this.swiperJson[boxCell]=_swiper; } }); this.bannerAfter(); } /** * 轮播之前执行事件 */ bannersBefore(){ $('.history-hd .bd li').eq(0).addClass('on'); $('.honor-hd .bd li').eq(0).addClass('on'); } /** * 轮播之后执行事件 */ bannerAfter(){ let that=this; $('.history-hd .bd li').click(function(){ let _index=$(this).index(); if(that.swiperJson['.history-cont'])that.swiperJson['.history-cont'].slideTo(_index); }) $('.honor-hd .bd li').click(function(){ let _index=$(this).index(); if(that.swiperJson['.honor-title'])that.swiperJson['.honor-title'].slideTo(_index); }) } /** * 设置轮播数字 * @param {*} e */ setBannerNum(e){ if(e.$el !=undefined && e.$el){//设置current let _index=e.realIndex+1; let _this=e.$el; if($(_this).find('.bannerNum').length>0){ let _num=$(_this).find('.bannerNum'); if(_index<10){ _index='0'+_index; } _num.find('.current').text(_index); }else if($(_this).parents('.bannerBox').find('.bannerNum').length>0){ let _num=$(_this).parents('.bannerBox').find('.bannerNum'); if(_index<10){ _index='0'+_index; } _num.find('.current').text(_index);; } }else{//设置total let _total=$(e).find('.bd .swiper-slide').length, _class=$(e)[0].className.split(' ')[0]; /*单独设置total*/ if($(e).data('view')){ let _view=$(e).data('view')-1; _total=_total-_view; } if($(e).find('.bannerNum').length>0){ let _num=$(e).find('.bannerNum'); if(length<10){ _total='0'+_total; } _num.find('.total').text(_total); }else if($(e).parents('.bannerBox').find('.bannerNum').length>0){ let _num=$(e).parents('.bannerBox').find('.bannerNum'); if(_total<10){ _total='0'+_total; } _num.find('.total').text(_total); } } } } const _app=new App();