(function($){ $.fn.kxbdsupermarquee = function(options){ var opts = $.extend({},$.fn.kxbdsupermarquee.defaults, options); return this.each(function(){ var $marquee = $(this);//滚动元素容器 var _scrollobj = $marquee.get(0);//滚动元素容器dom var scrollw = $marquee.width();//滚动元素容器的宽度 var scrollh = $marquee.height();//滚动元素容器的高度 var $element = $marquee.children(); //滚动元素 var $kids = $element.children();//滚动子元素 var scrollsize=0;//滚动元素尺寸 var _type = (opts.direction == 'left' || opts.direction == 'right') ? 1:0;//滚动类型,1左右,0上下 var scrollid, rollid, ismove, marqueeid; var t,b,c,d,e; //滚动动画的参数,t:当前时间,b:开始的位置,c:改变的位置,d:持续的时间,e:结束的位置 var _size, _len; //子元素的尺寸与个数 var $nav,$navbtns; var arrpos = []; var numview = 0; //当前所看子元素 var numroll=0; //轮换的次数 var nummoved = 0;//已经移动的距离 //防止滚动子元素比滚动元素宽而取不到实际滚动子元素宽度 $element.css(_type?'width':'height',10000); //获取滚动元素的尺寸 var navhtml = ''; //克隆滚动子元素将其插入到滚动元素后,并设定滚动元素宽度 $element.append($kids.clone()).css(_type?'width':'height',scrollsize*2); //轮换导航 if (opts.navid) { $nav = $(opts.navid).append(navhtml).hover( stop, start ); $navbtns = $('li', $nav); $navbtns.each(function(i){ $(this).bind(opts.eventnav,function(){ if(ismove) return; if(numview==i) return; rollfunc(arrpos[i]); $navbtns.eq(numview).removeclass('navon'); numview = i; $(this).addclass('navon'); }); }); $navbtns.eq(numview).addclass('navon'); } //设定初始位置 if (opts.direction == 'right' || opts.direction == 'down') { _scrollobj[_type?'scrollleft':'scrolltop'] = scrollsize; }else{ _scrollobj[_type?'scrollleft':'scrolltop'] = 0; } if(opts.ismarquee){ //滚动开始 //marqueeid = setinterval(scrollfunc, opts.scrolldelay); marqueeid = settimeout(scrollfunc, opts.scrolldelay); //鼠标划过停止滚动 $marquee.hover( function(){ clearinterval(marqueeid); }, function(){ //marqueeid = setinterval(scrollfunc, opts.scrolldelay); clearinterval(marqueeid); marqueeid = settimeout(scrollfunc, opts.scrolldelay); } ); //控制加速运动 if(opts.controlbtn){ $.each(opts.controlbtn, function(i,val){ $(val).bind(opts.eventa,function(){ opts.direction = i; opts.oldamount = opts.scrollamount; opts.scrollamount = opts.newamount; }).bind(opts.eventb,function(){ opts.scrollamount = opts.oldamount; }); }); } }else{ if(opts.isauto){ //轮换开始 start(); //鼠标划过停止轮换 $marquee.hover( stop, start ); } //控制前后走 if(opts.btngo){ $.each(opts.btngo, function(i,val){ $(val).bind(opts.eventgo,function(){ if(ismove == true) return; opts.direction = i; rollfunc(); if (opts.isauto) { stop(); start(); } }); }); } } function scrollfunc(){ var _dir = (opts.direction == 'left' || opts.direction == 'right') ? 'scrollleft':'scrolltop'; if(opts.ismarquee){ if (opts.loop > 0) { nummoved+=opts.scrollamount; if(nummoved>scrollsize*opts.loop){ _scrollobj[_dir] = 0; return clearinterval(marqueeid); } } var newpos = _scrollobj[_dir]+(opts.direction == 'left' || opts.direction == 'up'?1:-1)*opts.scrollamount; }else{ if(opts.duration){ if(t++=scrollsize){ newpos-=scrollsize; } }else{ if(newpos<=0){ newpos+=scrollsize; } } _scrollobj[_dir] = newpos; if(opts.ismarquee){ marqueeid = settimeout(scrollfunc, opts.scrolldelay); }else if(t=_len){ numview = 0; }else if(numview<0){ numview = _len-1; } $navbtns.eq(numview).addclass('navon'); numroll = numview; } var _temp = numroll<0?scrollsize:0; t=0; b=_scrollobj[_dir]; //c=(ppos != undefined)?ppos:_neg*opts.distance; e=(ppos != undefined)?ppos:_temp+(opts.distance*numroll)%scrollsize; if(_neg==1){ if(e>b){ c = e-b; }else{ c = e+scrollsize -b; } }else{ if(e>b){ c =e-scrollsize-b; }else{ c = e-b; } } d=opts.duration; //scrollid = setinterval(scrollfunc, opts.scrolldelay); if(scrollid) cleartimeout(scrollid); scrollid = settimeout(scrollfunc, opts.scrolldelay); } function start(){ rollid = setinterval(function(){ rollfunc(); }, opts.time*1000); } function stop(){ clearinterval(rollid); } function easeoutquad(t,b,c,d){ return -c *(t/=d)*(t-2) + b; } function easeoutquint(t,b,c,d){ return c*((t=t/d-1)*t*t*t*t + 1) + b; } }); }; $.fn.kxbdsupermarquee.defaults = { ismarquee:true,//是否为marquee isequal:true,//所有滚动的元素长宽是否相等,true,false loop: 0,//循环滚动次数,0时无限 newamount:3,//加速滚动的步长 eventa:'mousedown',//鼠标事件,加速 eventb:'mouseup',//鼠标事件,原速 isauto:true,//是否自动轮换 time:5,//停顿时间,单位为秒 duration:50,//缓动效果,单次移动时间,越小速度越快,为0时无缓动效果 eventgo:'click', //鼠标事件,向前向后走 direction: 'left',//滚动方向,'left','right','up','down' scrollamount:1,//步长 scrolldelay:10,//时长 eventnav:'click'//导航事件 }; $.fn.kxbdsupermarquee.setdefaults = function(settings) { $.extend( $.fn.kxbdsupermarquee.defaults, settings ); }; })(jquery);