Js图片滚动代码，横向纵向滚动，面向对象代码

来源：互联网发布：windows错误报告很大编辑：程序博客网时间：2024/05/18 03:45

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gbk">
<title>同页面多方向的图片滚动，面向对象</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:#000 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">
   
   <div class="prize">
       <h2>奖品展示</h2>
       <div class="prize-con dd">
           <ul>
               <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题1</li>
               <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题2</li>
               <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题3</li>
               <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题4</li>
               <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题5</li>
               <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题6</li>
               <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题7</li>
               <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题8</li>
           </ul>
       </div>
       <span class="l-bun"></span>
       <span class="r-bun"></span>
   </div>
   
   <div class="prize block2">
       <h2>奖品展示</h2>
       <div class="prize-con dd">
           <ul>
               <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题1</li>
               <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题2</li>
               <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题3</li>
               <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题4</li>
               <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题5</li>
               <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题6</li>
               <li><img src="/jscss/demoimg/wall_s1.jpg" />图片标题7</li>
               <li><img src="/jscss/demoimg/wall_s1.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 = e.indexOf(".")>=0,_isId = e.indexOf("#")>=0,newEle = e.substring(1);
       //get frist argument
       if(_isClass&&_isId) return;
       if(_isId){
           var obj = typeof newEle=="string"?document.getElementById(newEle):false;
       }else if(_isClass){
           var obj = _class(e);
       }else{
           return;
       }
       //get class
       function _class(c,o){
           var oDom = o?o:document,
               cParent = oDom.getElementsByTagName("*"),
               classAry = [],
               leng = cParent.length;
           for(var i=0;i<leng;i++){
               allC = cParent[i].className;
               if(allC.match("\\b"+newEle+"(?:$|[^\w\-])")){
                   classAry.push(cParent[i])
               }
           }
           return classAry.length==1?classAry[0]:classAry;
       }
       //second argument
       var _isArr = obj.constructor==Array;
       if(!!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);
           }
       }
       return obj.length==1?obj[0]:obj;
   }
   //even
   function Roll(){this.initial.apply(this,arguments)}
   Roll.prototype = {
       initial:function(o,l,r,s){
           var _this = this;
           this.obj = o;
           this.child = o.children;
           this.timeId = null;
           this.interval = null;
           this.funTime = null;
           this.set(s||{});
           this.oAttr = !!this.s.dir?this.child[0].offsetHeight:this.child[0].offsetWidth;
           this.dirNo = !!this.s.dir?"top":"left";
           l.onclick = function(){_this.prev();_this.s.auto = false;};
           r.onclick = function(){_this.next();_this.s.auto = false;};
           o.onmouseover = function(){_this.s.auto = false;clearInterval(_this.funTime);}
           this.s.auto&&(this.next(),o.onmouseout = l.onmouseout = r.onmouseout = function(){_this.funTime = setTimeout(function(){_this.s.auto = true;_this.next()},500)});
       },
       set:function(v){
           this.s = {
               dir:0,//滚动方向，0为横向滚动，1为纵向滚动
               auto:true//是否自动滚动
           }
           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;
           clearInterval(this.timerId);
           clearInterval(_this.funTime)
           clearInterval(this.interval);
           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.interval=setTimeout(function(){_this.next();},1500))):_this.obj.style[_this.dirNo] = iSpeed + dir + "px"
           },30);
       }
   }

   //marquee
   var 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],lBun[i],rBun[i],{dir:i%2?1:0}),mq = null;//实例化，当板块为偶数的时候像左边滚动，反之向上
   }
</script>
</body>
</html>