<!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">
<!--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 = 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>
Js图片滚动代码,横向纵向滚动,面向对象代码
最新推荐文章于 2022-03-03 00:43:10 发布