<!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() no-repeat 0 0;cursor:pointer;}
-bun{left:5px;}
-bun{background-position:0 -15px;right:10px;}
</style>
</head>
<body>
<div class="wrapper">
<!--block1-->
<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>
<!--block2-->
<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 = (".")>=0,_isId = ("#")>=0,newEle = (1);
//get frist argument
if(_isClass&&_isId) return;
if(_isId){
var obj = typeof newEle=="string"?(newEle):false;
}else if(_isClass){
var obj = _class(e);
}else{
return;
}
//get class
function _class(c,o){
var oDom = o?o:document,
cParent = ("*"),
classAry = [],
leng = ;
for(var i=0;i<leng;i++){
allC = cParent[i].className;
if(("\\b"+newEle+"(?:$|[^\w\-])")){
(cParent[i])
}
}
return ==1?classAry[0]:classAry;
}
//second argument
var _isArr = ==Array;
if(!!c){
if(_isArr){
for(var j=0,len=;j<len;j++){
var ele = obj[j].getElementsByTagName(c);
obj[j] = ==1?ele[0]:ele;
}
}else{
obj = (c);
}
}
return ==1?obj[0]:obj;
}
//even
function Roll(){(this,arguments)}
= {
initial:function(o,l,r,s){
var _this = this;
= o;
= ;
= null;
= null;
= null;
(s||{});
= !!?[0].offsetHeight:[0].offsetWidth;
= !!?"top":"left";
= function(){_this.prev();_this. = false;};
= function(){_this.next();_this. = false;};
= function(){_this. = false;clearInterval(_this.funTime);}
&&((), = = = function(){_this.funTime = setTimeout(function(){_this. = true;_this.next()},500)});
},
set:function(v){
= {
dir:0,//滚动方向，0为横向滚动，1为纵向滚动
auto:true//是否自动滚动
}
for(c in v){[c] = v[c]};
},
prev:function(){
([-1],);
[] = -+"px";
(0);
},
next:function(){
(-,function(){
var dir = !!?"top":"left";
([0]);
[] = 0;
});
},
moverIt:function(i,callBack){
var _this = this;
clearInterval();
clearInterval(_this.funTime)
clearInterval();
= setInterval(function(){
var dir = !!_this.?_this.:_this.,
iSpeed = (i-dir)/5;
iSpeed = iSpeed > 0 ? (iSpeed) : (iSpeed);
dir==i?(clearInterval(_this.timerId),callBack&&(_this),!!_this.&&(_this.interval=setTimeout(function(){_this.next();},1500))):_this.[_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=;i<leng;i++){
var mq = new Roll(menu[i],lBun[i],rBun[i],{dir:i%2?1:0}),mq = null;//实例化，当板块为偶数的时候像左边滚动，反之向上
}
</script>
</body>
</html>