基于OO的不间断滚动分享，支持滚动方向、是否自动滚动等自定义
前言：前段时间一直都好忙也就好久没有写些东西了，最近手上的事刚好告些段落了，把以前空写的写插件都拿出来分享下吧，希望对大家有些帮助，也希望有高手能帮忙指点下我的写不足和错误，一直以来自己写的东西都是在用，性能方面个人只能尽量靠近问题还很多……真心求指点；
插件简介：用于图片不间断的滚动，网上不间断滚动的代码真的很多，可扩展性却很多都有限，这个是好久以前写过的一个那个时候接触面向对象没多久，写的有些东西不够好，不过作为个人里程碑也就保留下来了
使用方法：在下面的js代码里面前面写了，大家可以看看直接复制粘贴就可以用了有问题可以联系我
<!DOCTYPE HTML><html><head><meta charset="gbk"><title>marquee</title><style>div,h2,ul,li,img,span{margin:0;padding:0;}li{list-style:none;}/*layout*/.wrapper{width:960px;margin:0 auto}.prize{width:960px;margin:20px auto;position:relative;background:#f6f4f2;font:12px Tahoma,sans-serif;border:1px solid #ccc;padding:1px;color:#052d30;}/*title*/.prize h2{height:25px;font:bold 14px/25px Tahoma;background:#0cf;text-indent:10px;text-shadow:1px 1px 1px #fff;}/*content*/.prize-con{width:900px;margin:0 auto;height:128px;overflow:hidden;padding:10px 0;position:relative;}.prize-con ul{width:200%;position:absolute;}.prize-con li{float:left;_display:inline;line-height:25px;text-align:center;margin-right:5px;}.prize-con li img{width:141px;height:110px;display:block;border:1px solid #ccc;padding:1px;}.block2{width:220px;margin:0;}.block2 .prize-con{width:150px;height:410px;padding:0;margin:10px auto;}.block2 ul{width:auto;}.block2 li{float:none;}/*button*/.prize span{display:block;position:absolute;top:50%;width:13px;height:15px;background:url(bun-bg.jpg) no-repeat 0 0;cursor:pointer;}span.l-bun{left:5px;}span.r-bun{background-position:0 -15px;right:10px;}</style></head><body><div class="wrapper"><!--block1--><div class="prize 222"><h2>奖品展示</h2><div class="prize-con dd"><ul><li><img src="http://g.pps.tv/style/images/Ban.jpg" />游戏装备1</li><li><img src="http://g.pps.tv/style/images/Ban.jpg" />游戏装备2</li><li><img src="http://g.pps.tv/style/images/Ban.jpg" />游戏装备3</li><li><img src="http://g.pps.tv/style/images/Ban.jpg" />游戏装备4</li><li><img src="http://g.pps.tv/style/images/Ban.jpg" />游戏装备5</li><li><img src="http://g.pps.tv/style/images/Ban.jpg" />游戏装备6</li><li><img src="http://g.pps.tv/style/images/Ban.jpg" />游戏装备7</li><li><img src="http://g.pps.tv/style/images/Ban.jpg" />游戏装备8</li></ul></div><span class="l-bun"></span><span class="r-bun"></span></div><!--block2--><div class="prize block2"><h2>奖品展示</h2><div class="prize-con dd"><ul><li><img src="http://g.pps.tv/style/images/Ban.jpg" />游戏装备1</li><li><img src="http://g.pps.tv/style/images/Ban.jpg" />游戏装备2</li><li><img src="http://g.pps.tv/style/images/Ban.jpg" />游戏装备3</li><li><img src="http://g.pps.tv/style/images/Ban.jpg" />游戏装备4</li><li><img src="http://g.pps.tv/style/images/Ban.jpg" />游戏装备5</li><li><img src="http://g.pps.tv/style/images/Ban.jpg" />游戏装备6</li><li><img src="http://g.pps.tv/style/images/Ban.jpg" />游戏装备7</li><li><img src="http://g.pps.tv/style/images/Ban.jpg" />游戏装备8</li></ul></div><span class="l-bun"></span><span class="r-bun"></span></div></div><script>//find elements_get = function(e,c){var _isClass,_isId,newEle;typeof e=="string"&&(_isClass = e.indexOf(".")>=0,_isId = e.indexOf("#")>=0,newEle = e.substring(1));//get frist argumentif(_isClass&&_isId) return;if(_isId){var obj = typeof newEle=="string"?document.getElementById(newEle):false;}else if(_isClass){var obj = _class(newEle),_isArr = obj.constructor==Array;}else{return;}//get classfunction _class(c,o){var oDom = o?o:document,cParent = oDom.getElementsByTagName("*"),classAry = [],leng = cParent.length;for(var i=0;i<leng;i++){var allC = cParent[i].className,word = allC.split(" ");for(var z=0,len=word.length;z<len;z++){word[z]==c&&classAry.push(cParent[i])}}return classAry.length==1?classAry[0]:classAry;}//second argumentif(!!c){if(_isArr){for(var j=0,len=obj.length;j<len;j++){var ele = obj[j].getElementsByTagName(c);obj[j] = ele.length==1?ele[0]:ele;}}else{obj = obj.getElementsByTagName(c);}}if(obj)return obj.length==1?obj[0]:obj;}//even/*调用规则，第一个参数是需要滚动的图片区域容器的指针（这个容器必须定义position，其实这里也可以用margin负像素实现，不过因为是很久以前的东西了也就没有再次做更改了）；第二个参数为一个对象这对象里面包含值：1、dir要滚动的方向0为横向滚动，1为纵向滚动2、lBut像左边滚动的按钮指针如果没有可以不用3、rBut像右边滚动按钮指针4、auto是否需要它自动滚动不需要则在传参数的时候设置为true;*/function Roll(){this.timeId = null;this.funTime = null;this.continuation = null;this.initial.apply(this,arguments)}Roll.prototype = {even:function(o,e,fun){o.attachEvent?o.attachEvent("on"+e,fun):o.addEventListener(e,fun,false)},initial:function(o,s){this.set(s||{});var _this = this,auto = this.s.auto;this.obj = o;this.child = o.children;this.oAttr = !!this.s.dir?this.child[0].offsetHeight:this.child[0].offsetWidth;this.dirNo = !!this.s.dir?"top":"left";if(this.s.lBut){this.even(this.s.lBut,this.s.evenStyle,function(){_this.continuation&&clearInterval(_this.continuation);_this.s.evenStyle==="mouseover"?(_this.continuation = setInterval(function(){_this.prev()},_this.s.timeSpeed)):_this.prev();_this.s.auto = false;_this.s.dirInit=1;})auto&&(this.even(this.s.lBut,"mouseout",function(){_this.moveDir()}));this.s.evenStyle=="mouseover"&&(this.even(this.s.lBut,"mouseout",function(){_this.continuation&&clearInterval(_this.continuation)}))}if(this.s.rBut){this.even(this.s.rBut,this.s.evenStyle,function(){_this.continuation&&clearInterval(_this.continuation);_this.s.evenStyle==="mouseover"?(_this.continuation = setInterval(function(){_this.next()},_this.s.timeSpeed)):_this.next();_this.s.auto = false;_this.s.dirInit=0;})auto&&(this.even(this.s.rBut,"mouseout",function(){_this.moveDir(_this.s.dirInit)}));this.s.evenStyle==="mouseover"&&(this.even(this.s.rBut,"mouseout",function(){_this.continuation&&clearInterval(_this.continuation)}))}this.even(o,"mouseover",function(even){var e = even || window.event,target = even.target || even.srcElement;_this.s.auto = false;if(target!==_this.s.rBut||target!==_this.s.lBut||_this.s.evenStyle!=="mouseover"){_this.continuation&&clearInterval(_this.continuation);_this.funTime&&clearInterval(_this.funTime);}})auto&&(this.moveDir(this.s.dirInit),this.even(o,"mouseout",function(){_this.moveDir(_this.s.dirInit)}))},set:function(v){this.s = {dir:0,//滚动方向，0为横向滚动，1为纵向滚动auto:true,//是否自动滚动lBut:null,rBut:null,dirInit:0,//图片开始滚动后滚动方向timeSpeed:1000,//效果执行事件evenStyle:"click"//触发事件类型}for(c in v){this.s[c] = v[c]};},prev:function(){this.obj.insertBefore(this.child[this.child.length-1],this.obj.firstChild);this.obj.style[this.dirNo] = -this.oAttr+"px";this.moverIt(0);},next:function(){this.moverIt(-this.oAttr,function(){var dir = !!this.s.dir?"top":"left";this.obj.appendChild(this.child[0]);this.obj.style[this.dirNo] = 0;});},moverIt:function(i,callBack){var _this = this;this.timerId&&clearInterval(this.timerId);this.funTime&&clearTimeout(this.funTime);this.timerId = setInterval(function(){var dir = !!_this.s.dir?_this.obj.offsetTop:_this.obj.offsetLeft,iSpeed = (i-dir)/5;iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);dir==i?(clearInterval(_this.timerId),callBack&&callBack.apply(_this),!!_this.s.auto&&(_this.moveDir(_this.s.dirInit))):_this.obj.style[_this.dirNo] = iSpeed + dir + "px"},30);},moveDir:function(d){var _this = this;this.s.auto = true;this.funTime = setTimeout(function(){d===0?_this.next():_this.prev()},_this.s.timeSpeed)}}//marqueevar menu = _get(".prize-con","ul"),lBun = _get(".l-bun"),rBun = _get(".r-bun");for(var i=0,leng=menu.length;i<leng;i++){var mq = new Roll(menu[i],{dir:i%2?1:0,lBut:rBun[i],rBut:lBun[i]}),mq = null;//实例化，当板块为偶数的时候像左边滚动，反之向上}</script></body></html>