carousel-ticker
Version:
JQuery plugin for rotate scrolling
1 lines • 5.65 kB
JavaScript
;!function(d){var h={direction:"prev",mode:"horizontal",speed:1,delay:30,onCarouselTickerLoad:function(){}};d.fn.carouselTicker=function(t){if(0==this.length)return this;if(1<this.length)return this.each(function(){d(this).carouselTicker(t)}),this;function i(){u.settings=d.extend({},h,t),u.intervalPointer=null,u.directionSwitcher="prev"===u.settings.direction?-1:1,u.itemsWidth=0,u.childsWidth=0,u.itemsHeight=0,u.childsHeight=0,u.$list=n.children("ul"),u.$items=u.$list.children("li"),u.isInitialize=!1,u.isMousemove=!1,u.$parent=n.parent(),u.wrapCls="carouselTicker__wrap",u.listCls="carouselTicker__list",u.loaderCls="carouselTicker__loader",u.cloneCls="carouselTicker__clone",u.touch="ontouchstart"in document.documentElement,u.eventTypes={mousedown:u.touch?"touchstart":"mousedown",mousemove:u.touch?"touchmove":"mousemove",mouseup:u.touch?"touchend":"mouseup"},e()}var u={},s=this,n=d(this),e=function(){function e(){n.children().hasClass(u.wrapCls)||(d("<div class='"+u.loaderCls+"'></div>").appendTo(n),n.find("."+u.wrapCls).css({position:"relative"}),u.$list.wrap("<div class='carouselTicker__wrap' style='position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none;'></div>"),u.$items.clone().addClass(u.cloneCls).appendTo(u.$list),u.$list.css({position:"relative"}),u.isInitialize=!0,u.settings.onCarouselTickerLoad(),o())}"horizontal"===u.settings.mode?(l(),u.itemsWidth>u.$parent.width()&&(n.find("."+u.wrapCls).css({width:u.$parent.width()+"px"}),u.$list.css({width:2*u.itemsWidth,left:0}),e())):"vertical"===u.settings.mode&&(u.itemsHeight=0,u.$items.each(function(){var e=d(this);e.hasClass(u.cloneCls)||(u.itemsHeight+=e.outerHeight(!0))}),u.itemsHeight>u.$parent.height()&&(n.find("."+u.wrapCls).css({height:u.$parent.height()+"px"}),u.$list.css({height:2*u.itemsHeight,top:0}),e())),u.isInitialize&&n.on("dragstart",function(e){if("IMG"==e.target.nodeName.toUpperCase()||"A"==e.target.nodeName.toUpperCase())return!1})},o=function(){var h;n.find("."+u.loaderCls).length&&n.find("."+u.loaderCls).remove(),u.intervalPointer=setInterval(function(){r()},u.settings.delay),n.on("mouseover",c),n.on("mouseleave",a),h=!1,u.$list.on(u.eventTypes.mousedown,function(e){var o=e.clientX||event.touches[0].pageX,r=e.clientY||event.touches[0].pageY,l=d(this),c=parseFloat(d(this).css("left")),a=parseFloat(d(this).css("top"));d(e.target).off("click"),clearInterval(u.intervalPointer),u.intervalPointer=!1,h=!0,l.on(u.eventTypes.mousemove,function(e){var t=e.clientX||event.touches[0].pageX,i=e.clientY||event.touches[0].pageY,s=o-t,n=r-i;u.touch&&d(document).on("touchmove",function(e){e.preventDefault()}),"horizontal"===u.settings.mode?u.directionSwitcher=0<=s?-1:1:"vertical"===u.settings.mode&&(u.directionSwitcher=0<=n?-1:1),u.isMousemove=!0,h&&("horizontal"===u.settings.mode?(0<=c-s&&1===u.directionSwitcher&&(l.css("left","-="+u.itemsWidth),c=-u.itemsWidth,o=e.clientX||event.touches[0].pageX,s=0),c-s<=-u.itemsWidth&&-1===u.directionSwitcher&&(l.css("left",0),s=c=0,o=e.clientX||event.touches[0].pageX),l.css("left",c-s+"px")):"vertical"===u.settings.mode&&(0<=a-n&&1===u.directionSwitcher&&(l.css("top","-="+u.itemsHeight),a=-u.itemsHeight,r=e.clientY||event.touches[0].pageY,n=0),a-n<=-u.itemsHeight&&-1===u.directionSwitcher&&(l.css("top",0),n=a=0,r=e.clientY||event.touches[0].pageY),l.css("top",a-n+"px")))})}),u.$list.on(u.eventTypes.mouseup,function(e){var t=d(e.target);e.preventDefault(),(t.attr("href")||t.parents().attr("href")&&u.isMousemove)&&t.on("click",function(e){e.preventDefault()}),h=!1,u.isMousemove=!1,u.settings.direction=1===u.directionSwitcher?"next":"prev",d(this).off(u.eventTypes.mousemove),u.touch&&d(document).off("touchmove"),u.intervalPointer&&clearInterval(u.intervalPointer),u.touch&&(u.intervalPointer=setInterval(function(){r()},u.settings.delay))})},r=function(){var e="horizontal"===u.settings.mode?"left":"top",t="horizontal"===u.settings.mode?u.itemsWidth:u.itemsHeight;u.$list.css(e,"+="+u.directionSwitcher*u.settings.speed+"px"),"prev"===u.settings.direction&&Math.abs(parseInt(u.$list.css(e)))>=t&&u.$list.css(e,0),"next"===u.settings.direction&&0<=parseInt(u.$list.css(e))&&u.$list.css(e,-t+"px")};function l(){u.itemsWidth=0,u.$items.each(function(){var e=d(this),t=this.currentStyle||window.getComputedStyle(this),i=parseFloat(t.marginLeft)+parseFloat(t.marginRight);e.hasClass(u.cloneCls)||(u.itemsWidth+=this.getBoundingClientRect().width+i)})}function c(){("horizontal"===u.settings.mode?u.itemsWidth>u.$parent.width():u.itemsHeight>u.$parent.height())&&(clearInterval(u.intervalPointer),u.intervalPointer=!1)}function a(){var e="horizontal"===u.settings.mode?u.itemsWidth>u.$parent.width():u.itemsHeight>u.$parent.height();if(u.isMousemove&&(u.$list.off(u.eventTypes.mousemove),u.$list.trigger(u.eventTypes.mouseup)),e){if(u.intervalPointer)return;u.intervalPointer=setInterval(function(){r()},u.settings.delay)}}return s.resizeTicker=function(){l(),u.itemsWidth>u.$parent.width()?u.isInitialize||i():u.isInitialize&&s.destructor()},s.stop=function(){n.off("mouseover",c),n.off("mouseleave",a),clearInterval(u.intervalPointer),u.intervalPointer=!1},s.run=function(){o()},s.destructor=function(){var e;n.find("."+u.cloneCls).remove(),n.find("."+u.wrapCls).length&&((e=n.find("."+u.listCls)).unwrap(),e.css({left:"auto",position:"static",width:"auto"}),n.css({width:"auto",position:"static"})),s.stop(),u.isInitialize=!1},s.reloadCarouselTicker=function(e){null!=e&&(t=e),s.destructor(),i()},"loading"===document.readyState?d(window).on("load",function(){i()}):i(),this}}(jQuery);