第一次吧js写成class，留一份看看
function gdclass()
{
var t;
var swidth,znum,num,movenum,snum;
var zdiv,gdtdiv;
var gdtup,gdtdown;
this.init=function(divid,width,linum)
{
znum=0;
num=0;
movenum=0;
swidth=width;
snum=linum;
zdiv = document.getElementById(divid);
znum=zdiv.getElementsByTagName('li').length;
for(var i=0;i<zdiv.getElementsByTagName('a').length;i++)
{
if(zdiv.getElementsByTagName('a')[i].id=='gdtup')
{
gdtup=zdiv.getElementsByTagName('a')[i];
}
if(zdiv.getElementsByTagName('a')[i].id=='gdtdown')
{
gdtdown=zdiv.getElementsByTagName('a')[i];
}
}
if(znum>snum)
{
gdtdown.style.display='';
}
for(var i=0;i<zdiv.getElementsByTagName('div').length;i++)
{
if(zdiv.getElementsByTagName('div')[i].id=='gdtdiv')
{
gdtdiv=zdiv.getElementsByTagName('div')[i];
break;
}
}
}
this.gdtdo = function (v)
{
num=v;
movenum=0;
t=setInterval(start,10);
}
this.introTxt = function(v)
{
for(var i=0;i<znum-1;i++)
{
var obj1 = zobj.getElementsByTagName('li')[i].getElementsByTagName('a')[0];
var obj2 = document.getElementById("b"+i);
if(obj1!=null&&obj2!=null)
{
obj1.className='';
obj2.style.display='none';
if(i==v)
{
obj1.className='select';
obj2.style.display='';
}
}
}
}
function start(){
if(num<0 && gdtdiv.scrollLeft==0)
{
clearInterval(t);
gdtup.style.display='none';
return;
}
else
{
gdtup.style.display='';
}
if(num>0 && gdtdiv.scrollLeft>=(znum-snum)*swidth)
{
clearInterval(t);
gdtdown.style.display='none';
return;
}
else
{
gdtdown.style.display='';
}
movenum+=10;
if(movenum>=swidth*snum)
{
clearInterval(t);
return;
}
gdtdiv.scrollLeft=gdtdiv.scrollLeft+(num*10);
}
}
使用方式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
li{float:left;width:145px;background:#cccccc;}
</style>
<script src="gdclass.js"></script>
<script>
var gdobj = new gdclass();//初始化类
window.onload = function() //加载页面
{
gdobj.init('show0',145,4);
}
function introTxt(num)
{
var obj;
for(var i=0;i<2;i++)
{
obj=document.getElementById('show'+i);
if(num==i)
{
obj.style.display='';
gdobj.init('show'+i,145,4);
}
else
{
obj.style.display='none';
}
}
}
</script>
</HEAD>
<BODY>
<div id="tt">000</div>
<a href="javascript:introTxt(0);">111</a>
<a href="javascript:introTxt(1);">222</a>
<div id="show0" style="display:;">
<h1 title="">aaaaaa</h1>
<a id="gdtup" href="javascript:gdobj.gdtdo(-1)" onfocus="this.blur()" style="display:none;" >up</a>
<a id="gdtdown" href="javascript:gdobj.gdtdo(1);" onfocus="this.blur()" style="display:none;">down</a>
<div id="gdtdiv" style="width:600px;overflow:hidden;">
<ul style="width:3000px;">
<li><a class="select" onfocus="this.blur()" onclick="gdobj.introTxt(0)" title="12 year old">1111</a></li>
<li><a onfocus="this.blur()" onclick="gdobj.introTxt(1)" title="12 year old">222</a></li>
<li><a onfocus="this.blur()" onclick="gdobj.introTxt(2)" title="12 year old">3333</a></li>
<li><a onfocus="this.blur()" onclick="gdobj.introTxt(3)" title="12 year old">4444</a></li>
<li><a onfocus="this.blur()" onclick="gdobj.introTxt(4)" title="12 year old">5555</a></li>
<li><a onfocus="this.blur()" onclick="gdobj.introTxt(5)" title="12 year old">6666</a></li>
<li><a onfocus="this.blur()" onclick="gdobj.introTxt(6)" title="12 year old">7777</a></li>
<li><a onfocus="this.blur()" onclick="gdobj.introTxt(7)" title="12 year old">888</a></li>
<li><a onfocus="this.blur()" onclick="gdobj.introTxt(8)" title="12 year old">999</a></li>
</ul>
</div>
</div>
<div style="clear:both;"></div>
<div id="show1" style="display:none;">
<h1 title="">bbbbb</h1>
<a id="gdtup" href="javascript:gdobj.gdtdo(-1)" onfocus="this.blur()" style="display:none;" >up</a>
<a id="gdtdown" href="javascript:gdobj.gdtdo(1);" onfocus="this.blur()" style="display:none;">down</a>
<div id="gdtdiv" style="width:600px;overflow:hidden;">
<ul style="width:3000px;">
<li><a class="select" onfocus="this.blur()" onclick="gdobj.introTxt(0)" title="12 year old">1111</a></li>
<li><a onfocus="this.blur()" onclick="gdobj.introTxt(1)" title="12 year old">222</a></li>
<li><a onfocus="this.blur()" onclick="gdobj.introTxt(2)" title="12 year old">3333</a></li>
<li><a onfocus="this.blur()" onclick="gdobj.introTxt(3)" title="12 year old">4444</a></li>
<li><a onfocus="this.blur()" onclick="gdobj.introTxt(4)" title="12 year old">5555</a></li>
<li><a onfocus="this.blur()" onclick="gdobj.introTxt(5)" title="12 year old">6666</a></li>
<li><a onfocus="this.blur()" onclick="gdobj.introTxt(6)" title="12 year old">7777</a></li>
<li><a onfocus="this.blur()" onclick="gdobj.introTxt(7)" title="12 year old">888</a></li>
<li><a onfocus="this.blur()" onclick="gdobj.introTxt(8)" title="12 year old">999</a></li>
</ul>
</div>
</div>
</BODY>
</HTML>