@miclay/slidejs/lib/index.js

SlideJS实现分屏滚动功能，不依赖任何第三方库

!function(t,i,e){"undefined"!=typeof module&&module.exports?module.exports=e():"function"==typeof define&&define.amd?define(e):i.SlideJS=e()}(0,this,function(){var t=function(t){for(var i in this.opts={parentSelector:".slide-box",itemSelector:".slide-item",itemDocSelector:null,width:null,height:null,transitionDuration:500,transitionTimingFunction:"ease",transitionDelay:0,activeIndex:0,loop:!1,scrollSensitivity:300,beforeSlide:function(){},afterSlide:function(){}},t=t||{})this.opts[i]=t[i];this.activeIndex=this.opts.activeIndex,this.sliding=!1,this.contentScrolling=!1,this._init()};return t.prototype={_init:function(){var t=this.opts,i=document.querySelector(t.parentSelector);if(!i||!i.querySelectorAll)throw Error('请传入正确的parentSelector参数(如:".slid-box")');if(this.domSlidBox=i,this.domSlidItems=i.querySelectorAll(t.itemSelector),!this.domSlidItems||!this.domSlidItems.length)throw Error('请传入正确的itemSelector参数(如:".slid-item")');this.adapt(),this._addEvents()},_addEvents:function(){var t,r=this,d=this.opts,c=this.domSlidItems,n=function(t){var i=c[r.activeIndex],e=i.children&&i.children.length?i.children[0]:null,n=d.itemDocSelector?i.querySelector(d.itemDocSelector):e;if(!n)return!1;var o=d.height||window.innerHeight,s=n.clientHeight||0;if(s-o<=0)return!1;var l=i.scrollTop||0;if(t<0){if(l<s-o)return!0}else if(0<t&&0<l)return!0;return!1};t=window.onresize,window.onresize=t&&"function"==typeof t?function(t){r.adapt()}:function(t){r.adapt()},function(){var t=function(t){var i=t.wheelDelta||-1*t.detail;n(i)||(i<0?r.slideNext():0<i&&r.slidePrev())};document.addEventListener&&document.addEventListener("DOMMouseScroll",t,!1),window.onmousewheel=document.onmousewheel=t;for(var e=0;e<c.length;e++)!function(){var t=c[e],i=-1;t.onscroll=function(t){r.contentScrolling=!0,i=clearTimeout(i),i=setTimeout(function(){r.contentScrolling=!1},r.opts.scrollSensitivity)}}()}(),function(){if("ontouchstart"in window){var e=-1;document.ontouchstart=function(t){e=t.touches[0].clientY},document.ontouchmove=function(t){var i=t.touches[0].clientY-e;n(i)||(i<-10?r.slideNext():10<i&&r.slidePrev())},document.ontouchend=function(t){e=-1}}}()},_anim:function(t,i,e){var n=this.opts.height||window.innerHeight;i<e?(t.style.top=-1*n+"px",t.style.opacity=0):e<i?(t.style.top=n+"px",t.style.opacity=0):(t.style.top=0,t.style.opacity=1,t.scrollTop=0)},adapt:function(){var t=this.opts,i=this.domSlidBox,e=this.domSlidItems,n=t.width||window.innerWidth,o=t.height||window.innerHeight,s="all "+t.transitionDuration+"ms "+t.transitionTimingFunction+" "+t.transitionDelay+"ms";i.style.position="fixed",i.style.width=n+"px",i.style.height=o+"px",i.style.left=0,i.style.top=0,i.style.overflow="hidden";for(var l=0;l<e.length;l++){var r=e[l];r.style.position="absolute",r.style.width=n+"px",r.style.height=o+"px",r.style.overflow="auto",this._anim(r,l,this.activeIndex),r.style.transition=s,r.style["-ms-transition"]=s,r.style["-webkit-transition"]=s,r.style["-o-transition"]=s,r.style["-moz-transition"]=s}},slideNext:function(){if(!this.sliding&&!this.contentScrolling){var t=this.activeIndex+1;if(this.domSlidItems.length-1<t){if(!this.loop)return;t=0}this.slideTo(t)}},slidePrev:function(){if(!this.sliding&&!this.contentScrolling){var t=this.activeIndex,i=this.domSlidItems.length,e=t-1;if(e<0){if(!this.loop)return;e=i-1}this.slideTo(e)}},slideTo:function(t){var i=this,e=this.opts,n=this.activeIndex;if(!this.sliding&&!this.contentScrolling&&"stop"!==e.beforeSlide(n,t)){this.sliding=!0,setTimeout(function(){i.sliding=!1,e.afterSlide(n,t)},e.transitionDuration+500);for(var o=this.domSlidItems,s=0;s<o.length;s++){var l=o[s];this._anim(l,s,t)}this.activeIndex=t}}},t});