击左右/上下滚动，可以用按钮点击控制，也可以自行滚动!兼容IE/FF可控制图片左右滚动+文字上下滚动
效果图如下:
代码如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>兼容IE/FF可控制图片左右滚动+文字上下滚动</title>
<script type="text/javascript">
//******comes http://www.86y.org********//
//******Editor by charrysong 2010-03-10********//
function ok22(container,btnPrevious,btnNext)
{
////////////////对外接口/////////////////////////
this.IsAutoScroll = true; //是否自动滚动
this.IsSmoothScroll= true;//是否平滑连续滚动 平滑滚动:true 间隔滚动:false
this.PauseTime = 1000;//间隔滚动时每次滚动间隔的时间。单位：毫秒。建议值：100--3000 适用于间隔滚动。
this.Direction = "N"; //滚动方向.向东：E，向北：N
this.ControllerType = "click";//上一个和下一个按钮事件的触发方式:click为点击触发滚动 否则就是 鼠标按住按钮触发滚动。支持click 和mousedown两种模式
this.BackCall = null;//回调函数 滚动到末尾时执行
this.Step = 1;//步长 可以理解为速度1--10
////////////////对外接口/////////////////////////
this.Speed = 10;
this.container = container;
this.NextButton = this.$(btnNext);
this.PreviousButton = this.$(btnPrevious);
this.ScrollElement = this.$(container);
this.UlElement = this.$(container).getElementsByTagName('ul')[0];//ul元素
this.UlElement.innerHTML+=this.UlElement.innerHTML;
this.UlSpace ;//ul的实际宽度
this.LiSpace;
}
ok22.prototype = {
lastpos:0,
curPos:0,
curTimeoutId:null,
curIntervalScrollTimeoutId:null,
ScrollElementPos:0,
$:function(element)
{
return document.getElementById(element);
},
Init:function()
{
this.UlSpace = this.Direction=="E"?this.UlElement.offsetWidth:this.UlElement.offsetHeight;//ul的实际宽度
this.LiSpace = parseInt(this.UlSpace/this.UlElement.getElementsByTagName('li').length);
this.UlSpace = this.LiSpace*this.UlElement.getElementsByTagName('li').length;
this.Direction=="E"?this.$(this.container).style.width=this.UlSpace+"px":this.$(this.container).style.height=this.UlSpace+"px";
//设置基础样式
this.ScrollElement.style.overflow="visible";
//this.ScrollElement.parentNode.style.overflow="hidden"; 父节点的样式
this.Direction=="E"?this.ScrollElement.style.width="10000px":this.ScrollElement.style.height="10000px";
this.UlElement.style.float="left";
this.ScrollType=this.Direction=="E"?"left":"top";
this.Bind(this,this.PreviousButton,this.ControllerType,"Pre");
this.Bind(this,this.NextButton,this.ControllerType,"Next");
this.ScrollElement.onmouseover = this.GetFunction(this,"MouseOver");
this.ScrollElement.onmouseout = this.GetFunction(this,"MouseOut");
},
Reset:function()
{
this.Pause();
this.ScrollElement.style[this.ScrollType] = '0px'
},
Bind:function(_this,el,type,param)
{
if(el)
{
if(type=="click"){
el.onclick = this.GetFunction(this,param);
}
else
{
el.onmousedown = this.GetFunction(this,"MouseDown",param);
el.onmouseup = this.GetFunction(this,"MouseUp");
}
el.onmouseover = this.GetFunction(this,"MouseOver");
el.onmouseout = this.GetFunction(this,"MouseOut");
}
},
Start:function()
{
if(!this.IsAutoScroll) return;
if(this.IsSmoothScroll)
{
this.SmoothScroll();
}
else
{
this.IntervalScroll();
}
},
Pause:function()
{
clearTimeout(this.curTimeoutId);
clearTimeout(this.curIntervalScrollTimeoutId);
},
MouseOver:function()
{
clearTimeout(this.mouseoutTimeoutId);
this.mouseoverTimeoutId = setTimeout(this.GetFunction(this,"Pause"),10);
},
MouseOut:function()
{
clearTimeout(this.mouseoverTimeoutId);
this.mouseoutTimeoutId = setTimeout(this.GetFunction(this,"Start"),10);
},
MouseDown:function(direction)
{
var _step;
var _to;
if(direction=="Pre")
{
_step = this.Step*2;
curPos = parseInt(this.ScrollElement.style[this.ScrollType]);
if(!curPos) curPos=0;
if(curPos==0)
{
this.ScrollElement.style[this.ScrollType] = -this.UlSpace/2 + "px";
this.curPos=-this.UlSpace/2;
}
_to = 0;
}
else
{
_step = -this.Step*2;
_to = -this.UlSpace/2;
}
moveParams = {from:this.curPos, to:_to, step: _step,controller:"MouseDown:" + direction,callback:this.GetFunction(this,"ScrollFinish")};
this.RunScroll(moveParams);
},
MouseUp:function()
{
clearTimeout(this.curTimeoutId);
},
Pre:function()
{
var curPos = parseInt(this.ScrollElement.style[this.ScrollType]);
if(!curPos) curPos=0;
var _to ;
if(curPos==0)
{
this.ScrollElement.style[this.ScrollType] = -this.UlSpace/2 + "px";
this.curPos=-this.UlSpace/2;
_to = -this.UlSpace/2 + this.LiSpace;
}
else
{
_to = this.curPos%this.LiSpace==0?this.curPos + this.LiSpace:parseInt(this.curPos/this.LiSpace)*this.LiSpace;
}
moveParams = {from:this.curPos, to:_to, step: this.Step*2,controller:"Previous",callback:this.GetFunction(this,"ScrollFinish")};
this.RunScroll(moveParams);
},
Next:function()
{
_to = this.curPos%this.LiSpace==0?this.curPos - this.LiSpace:(parseInt(this.curPos/this.LiSpace)-1)*this.LiSpace;
moveParams = {from:this.curPos, to:_to, step: -this.Step*2,controller:"Next",callback:this.GetFunction(this,"ScrollFinish")};
this.RunScroll(moveParams);
},
IntervalScroll:function()
{
var _to = parseInt(this.curPos/this.LiSpace)*this.LiSpace-this.LiSpace;
var moveParams = {from:this.curPos, to:_to, step: -this.Step,controller:"IntervalScroll",callback:this.GetFunction(this,"ScrollFinish")};
this.RunScroll(moveParams);
},
SmoothScroll:function()
{
var _to = -this.UlSpace/2;
var moveParams = {from:this.curPos, to:_to, step: -this.Step,controller:"SmoothScroll",callback:this.GetFunction(this,"ScrollFinish")};
this.RunScroll(moveParams);
},
RunScroll:function(params)
{
this.Scroll(params);
},
Scroll:function(param)
{
var step = Math.abs(param.to - this.curPos)<Math.abs(param.step)?param.to - this.curPos:param.step;
this.ScrollElement.style[this.ScrollType] =(param.from+step)+"px";
this.curPos = parseInt(this.ScrollElement.style[this.ScrollType]);
clearTimeout(this.curTimeoutId);
if(this.curPos!=param.to)
{
var moveParams = {from:this.curPos, to:param.to, step: param.step,controller:param.controller,callback:param.callback};
this.curTimeoutId = setTimeout(this.GetFunction(this,"Scroll",moveParams),this.Speed);
}
else
{
if(param.callback) param.callback();
if(param.controller=="SmoothScroll")
{ this.SmoothScroll();}
else if (param.controller=="IntervalScroll")
{
if(this.curIntervalScrollTimeoutId) clearTimeout(this.curIntervalScrollTimeoutId);
this.curIntervalScrollTimeoutId = setTimeout(this.GetFunction(this,"IntervalScroll"),this.PauseTime);
}
else if(param.controller.indexOf("MouseDown")!=-1)
{
derection = param.controller.split(':')[1];
this.MouseDown(derection);
}
}
},
ScrollFinish:function()
{
if(this.curPos<=-this.UlSpace/2)
{
this.ScrollElement.style[this.ScrollType] = "0px";
}
else if(this.curPos>=0)
{
this.ScrollElement.style[this.ScrollType] = -this.UlSpace/2 + "px";
}
this.curPos = parseInt(this.ScrollElement.style[this.ScrollType]);
if(this.BackCall)this.BackCall();
},
GetFunction:function(variable,method,param)
{
return function()
{
variable[method](param);
}
}
}
</script>
<style>
*{margin:0;padding:0;font-style:normal;font-weight:normal;}
a{color:#333;}
h2{font-size:14px;}
/*合作媒体 图片滚动左右,文字上下滚动,兼容ie/ff 兼容IE/FF可控制图片左右滚动+文字上下滚动*/
.picsbox{width:642px;padding:0 0 16px;border:1px solid #BDDEF4;margin:10px;}
.picsbox .picList{width:610px;height:160px;margin:10px 0 0 0;overflow:hidden;position:relative;}
#photolist_84 {position:relative;width:50000px;overflow: visible;}
#photolist_84 ul{float:left;margin:0px;padding:0px 0 0 12px;}
#photolist_84 ul li{float:left;width:120px;margin:0 12px 0 23px;display:inline;overflow:hidden;font-size:12px;}
#photolist_84 ul li a img{border:none;width:120px;height:160px;}
.blockR2{ float:left;margin:10px 10px 0 10px;display:inline;background:#fff;border:1px solid #BDDEF4;width:313px;}
.scrollList_38 {position: relative;padding:0 10px;width:293px;height:105px;margin:10px 0;overflow:hidden;}
.scrollList_38 .photolist {position: relative;overflow: visible;height:10000px;}
.scrollList_38 .photolist ul{float:left;margin:0px;padding:0px;}
.scrollList_38 .photolist li {float:left;width:310px;list-style:none;line-height:22px;font-size:12px;}
.us_tit{ background:url(http://www.86y.org/upload/images/20110317114118857.jpg) no-repeat;height:25px;padding:17px 0 0 6px;}
.us_tit span{float:right;margin:-2px 0 0;}
.us_tit span a{background:url(http://www.86y.org/upload/images/20110317114052529.png) no-repeat 0 0;width:23px;height:19px;margin-right:5px;display:inline-block;cursor:pointer;}
.us_tit span a.scollLeft{background-position:0 0;}
.us_tit span a.scollRight{background-position:0 -19px;}
.us_tit span a.scollup{background-position:0 -38px;}
.us_tit span a.scolldown{background-position:0 -57px;}
</style>
</head>
<body>
<div class="picsbox">
<h2 class="us_tit"><span><a class="scollLeft" id="pre_84"></a><a class="scollRight" id="next_84"></a></span><a href="http://www.86y.org">左右移动</a></h2>
<div class="picList">
<div id="photolist_84">
<ul class="us_blue">
<li><a href="http://www.86y.org"><img src="http://www.86y.org/photo/2010121714001807_S.jpg"></a></li>
<li><a href="http://www.86y.org"><img src="http://www.86y.org/photo/2010121714004648_S.jpg"></a></li>
<li><a href="http://www.86y.org"><img src="http://www.86y.org/photo/2010121714012809_S.jpg"></a></li>
<li><a href="http://www.86y.org"><img src="http://www.86y.org/photo/2010121714015509_S.jpg"></a></li>
<li><a href="http://www.86y.org"><img src="http://www.86y.org/photo/2010121714021876_S.jpg"></a></li>
<li><a href="http://www.86y.org"><img src="http://www.86y.org/photo/2010121714024050_S.jpg"></a></li>
<li><a href="http://www.86y.org"><img src="http://www.86y.org/photo/2010121714031618_S.jpg"></a></li>
<li><a href="http://www.86y.org"><img src="http://www.86y.org/photo/2010121714040139_S.jpg"></a></li>
</ul>
</div>
</div>
</div>
<div class="blockR2">
<h2 class="us_tit"><span><a class="scollup" id="pre_38"></a><a class="scolldown" id="next_38"></a></span><a href="http://www.86y.org">上下移动</a></h2>
<div class="scrollList_38">
<div class="photolist" id="photolist_38">
<ul>
<li><a href="http://www.86y.org">武汉一幼儿园校车发生车祸 4死3伤 </a></li>
<li><a href="http://www.86y.org">小学规定不准自带食物入校 学生躲厕所喝</a></li>
<li><a href="http://www.86y.org">"滑板妈妈"行乞供儿女上学:希望有份工作</a></li>
<li><a href="http://www.86y.org">3岁男童患怪病 数次“病危”全家举债救病童</a></li>
</ul>
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
var scroll_84= new ok22("photolist_84","pre_84","next_84");
scroll_84.IsAutoScroll = true;//是否自动滚动
scroll_84.Speed=20;//滚动速度微调
scroll_84.IsSmoothScroll= false;//是否平滑连续滚动 平滑滚动:true 间隔滚动:false
scroll_84.PauseTime = 5000;//间隔滚动时每次滚动间隔的时间。单位：毫秒。建议值：100--3000 适用于间隔滚动。
scroll_84.Direction = "E";//滚动方向.向东：E，向北：N
scroll_84.Step =22; //滚动步长，可以理解为滚动速度。值越大速度越快。值范围:1--10
scroll_84.ControllerType = "click";//上一个和下一个按钮事件的触发方式:click为点击触发滚动 否则就是 鼠标按住按钮触发滚动。支持click 和mousedown两种模式
scroll_84.BackCall = null;//回调函数 滚动到末尾时执行
scroll_84.Init();
scroll_84.Start(); //开始滚动
var scroll_38= new ok22("photolist_38","pre_38","next_38");
scroll_38.Speed=80;//滚动速度微调
scroll_38.IsSmoothScroll= true;//是否平滑连续滚动 平滑滚动:true 间隔滚动:false
scroll_38.PauseTime = 1000;//间隔滚动时每次滚动间隔的时间。单位：毫秒。建议值：100--3000 适用于间隔滚动。
scroll_38.Direction = "N";//滚动方向.向东：E，向北：N
scroll_38.Step =1; //滚动步长，可以理解为滚动速度。值越大速度越快。值范围:1--10
scroll_38.ControllerType = "mousedown";//上一个和下一个按钮事件的触发方式:click为点击触发滚动 否则就是 鼠标按住按钮触发滚动。支持click 和mousedown两种模式
scroll_38.BackCall = null;//回调函数 滚动到末尾时执行
scroll_38.Init();
scroll_38.Start(); //开始滚动
</SCRIPT>
</body>
</HTML>
(完)
大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：
【幸凡前端技术交流群】
如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)