JS 增加编号问题

如何增加个序号 让我随意指定要显示的图片文字。如：指1111显示CCCC内容 ☞ 2222 也显示CCCC内容 ☞3333 显示EEEE内容。<html>
<head><title></title>
<style type="text/css">
<!--.undis {
DISPLAY: none
}#au {
FILTER: progid:DXImageTransform.Microsoft.Fade ( duration=0.5,overlap=1.0 )
}
#au IMG {
FILTER: progid:DXImageTransform.Microsoft.Fade ( duration=0.5,overlap=1.0 ); HEIGHT: 225px
}-->
</style></head>
<body style="text-align:center">
      <DIV id=au style="WIDTH: 325px">
  
      <DIV class=dis name="f"><A href="#"><IMG src="images/01.jpg" ></A>AAAA</DIV>
  
  <DIV class=undis name="f"><A href="#"><IMG src="images/02.jpg" ></A>BBBB</DIV>   <DIV class=undis name="f"><A href="#"><IMG src="images/03.jpg" ></A>CCCC</DIV>
  
  <DIV class=undis name="f"><A href="#"><IMG src="images/04.jpg" ></A>DDDD</DIV>
  
  <DIV class=undis name="f"><A href="#"><IMG src="images/05.jpg" ></A>EEEE</DIV>
  
  <DIV class=undis name="f"><A href="#"><IMG src="images/06.jpg" ></A>FFFF</DIV>      
  
  </DIV>
  
      <TABLE id=simg cellSpacing=0 cellPadding=0 width=326 border=0>
        <TBODY>
        <TR>
          <TD class=s onmouseover="play(this,'au','');" align=right><A 
            href="#" 
            target=_blank>1111</A></TD>
          <TD class=s onmouseover="play(this,'au','');" align=right><A 
            href="#" 
            target=_blank>222</A></TD>
          <TD class=s onmouseover="play(this,'au','');" align=right><A 
            href="#" 
            target=_blank>3333</A></TD>
          <TD class=s onmouseover="play(this,'au','');" align=right><A 
            href="#">4444</A></TD>

<TD class=s onmouseover="play(this,'au','');" align=right><A 
            href="#">5555</A></TD>

          <TD class=s onmouseover="play(this,'au','');" align=right><A 
            href="#">6666</A></TD>

</TR></TBODY></TABLE><SCRIPT>
function getid(obj)//取对应id的元素
  {
return document.getElementById(obj);
  } function getNames(obj,name,tij)//取obj元素下标签为tij的元素并要求满足name属性=name;返回一个数组
{
var p = getid(obj);
var plist = p.getElementsByTagName(tij);
var rlist = new Array();
for(i=0;i<plist.length;i++)
{
if(plist[i].getAttribute("name") == name)
{
rlist[rlist.length] = plist[i];
}
}
return rlist;
} function ri(obj)//取得对应的小图列表中当前元素对应的序号
{
var p = getid("simg").getElementsByTagName("td");
for(i=0;i<p.length;i++)
{
if(obj == p[i])
{
return i;
}
}
} function ci(obj)//小图选择框的处理函数
{
var p = getid("simg").getElementsByTagName("td");
for(i=0;i<p.length;i++)
{
if(obj ==p[i])
{
p[i].className ="s";
}
else
{
p[i].className ="";
}
}
}
function fiterplay(obj,num,t,name)//类似页卡的函数.设置对应内容的隐藏和显示 obj:元素的id  name:元素对应的name属性的值, t:对应内容的标签 num:当前选择的元素的序号
{
var fitlist = getNames(obj,name,t);
for(i=0;i<fitlist.length;i++)
{ if(i == num)
{
fitlist[i].className = "dis";
}
else
{
fitlist[i].className = "undis";
}
}
}
  
  
function play(obj,n1)//播放的函数
{
var p = obj.parentNode.parentNode.getElementsByTagName("img");
var au = getid(n1);
var num = ri(obj);
try //ie下的处理部分
{
with(au)
{
filters[0].Apply(); //接收滤镜
ci(obj); //变幻小图的选择.可以放在try以外.
fiterplay(n1,num,"div","f");//设置滤镜中对应部分的显示和隐藏
filters[0].play(); //播放滤镜
}
}
catch(e)//ff下的处理部分
{
ci(obj);
fiterplay(n1,num,"div","f");
}
}
var n=0;
function clearAuto() {clearInterval(autoStart);};
function setAuto(){autoStart=setInterval("auto(n)", 4000)}
function auto()
{
var x = getid("simg").getElementsByTagName("td");
n++;
if(n>3)n=0;
play(x[n],"au");
}
function tabs_z(o,n){
var m_n = document.getElementById(o).getElementsByTagName("em");
var c_n = document.getElementById(o).getElementsByTagName("ol");
for(i=0;i<m_n.length;i++){
 m_n[i].className=i==n?"tab_on":"";
   c_n[i].style.display=i==n?"block":"none";
 }
}
</SCRIPT>
</body>
</html>

解决方案 »

  1.   

    这样可以了吗
    <html>
    <head><title></title>
    <style type="text/css">
    <!--.undis {
        DISPLAY: none
    }#au {
        FILTER: progid:DXImageTransform.Microsoft.Fade ( duration=0.5,overlap=1.0 )
    }
    #au IMG {
        FILTER: progid:DXImageTransform.Microsoft.Fade ( duration=0.5,overlap=1.0 ); HEIGHT: 225px
    }-->
    </style></head>
    <body style="text-align:center">
          <DIV id=au style="WIDTH: 325px">
          
          <DIV class=dis name="f"><A href="#"><IMG src="images/01.jpg" ></A>AAAA</DIV>
          
          <DIV class=undis name="f"><A href="#"><IMG src="images/02.jpg" ></A>BBBB</DIV>      <DIV class=undis name="f"><A href="#"><IMG src="images/03.jpg" ></A>CCCC</DIV>
          
          <DIV class=undis name="f"><A href="#"><IMG src="images/04.jpg" ></A>DDDD</DIV>
          
          <DIV class=undis name="f"><A href="#"><IMG src="images/05.jpg" ></A>EEEE</DIV>    
          
          <DIV class=undis name="f"><A href="#"><IMG src="images/06.jpg" ></A>FFFF</DIV>                    
      
          </DIV>
          
          <TABLE id=simg cellSpacing=0 cellPadding=0 width=326 border=0>
            <TBODY>
            <TR>
              <TD class=s onmouseover="play(this,'au',2);" align=right><A 
                href="#" 
                target=_blank>1111</A></TD>
              <TD class=s onmouseover="play(this,'au',2);" align=right><A 
                href="#" 
                target=_blank>222</A></TD>
              <TD class=s onmouseover="play(this,'au',4);" align=right><A 
                href="#" 
                target=_blank>3333</A></TD>
              <TD class=s onmouseover="play(this,'au');" align=right><A 
                href="#">4444</A></TD>
        
        <TD class=s onmouseover="play(this,'au');" align=right><A 
                href="#">5555</A></TD>
        
                  <TD class=s onmouseover="play(this,'au');" align=right><A 
                href="#">6666</A></TD>
        
        </TR></TBODY></TABLE><SCRIPT>
    function getid(obj) //取对应id的元素
    {
    return document.getElementById(obj);
    }
    function getNames(obj, name, tij) //取obj元素下标签为tij的元素并要求满足name属性=name;返回一个数组
    {
    var p = getid(obj);
    var plist = p.getElementsByTagName(tij);
    var rlist = new Array();
    for (i = 0; i < plist.length; i++) {
    if (plist[i].getAttribute("name") == name) {
    rlist[rlist.length] = plist[i];
    }
    }
    return rlist;
    }
    function ri(obj) //取得对应的小图列表中当前元素对应的序号
    {
    var p = getid("simg").getElementsByTagName("td");
    for (i = 0; i < p.length; i++) {
    if (obj == p[i]) {
    return i;
    }
    }
    }
    function ci(obj) //小图选择框的处理函数
    {
    var p = getid("simg").getElementsByTagName("td");
    for (i = 0; i < p.length; i++) {
    if (obj == p[i]) {
    p[i].className = "s";
    } else {
    p[i].className = "";
    }
    }
    }
    function fiterplay(obj, num, t, name) //类似页卡的函数.设置对应内容的隐藏和显示 obj:元素的id  name:元素对应的name属性的值, t:对应内容的标签 num:当前选择的元素的序号
    {
    var fitlist = getNames(obj, name, t);
    for (i = 0; i < fitlist.length; i++) {
    if (i == num) {
    fitlist[i].className = "dis";
    } else {
    fitlist[i].className = "undis";
    }
    }
    }
    function play(obj, n1, no) //播放的函数
    {
    var p = obj.parentNode.parentNode.getElementsByTagName("img");
    var au = getid(n1);
    var num = ri(obj); if (!isNaN(no)) {
    num = no;
    }
    try //ie下的处理部分
    {
    with(au) {
    filters[0].Apply(); //接收滤镜
    ci(obj); //变幻小图的选择.可以放在try以外.
    fiterplay(n1, num, "div", "f"); //设置滤镜中对应部分的显示和隐藏
    filters[0].play(); //播放滤镜
    }
    } catch(e) //ff下的处理部分
    {
    ci(obj);
    fiterplay(n1, num, "div", "f");
    }
    }
    var n = 0;
    function clearAuto() {
    clearInterval(autoStart);
    };
    function setAuto() {
    autoStart = setInterval("auto(n)", 4000)
    }
    function auto() {
    var x = getid("simg").getElementsByTagName("td");
    n++;
    if (n > 3) n = 0;
    play(x[n], "au");
    }
    function tabs_z(o, n) {
    var m_n = document.getElementById(o).getElementsByTagName("em");
    var c_n = document.getElementById(o).getElementsByTagName("ol");
    for (i = 0; i < m_n.length; i++) {
    m_n[i].className = i == n ? "tab_on": "";
    c_n[i].style.display = i == n ? "block": "none";
    }
    }</SCRIPT>
    </body>
    </html>
      

  2.   

    现在是 鼠标移动到1111 在显示区域 显示图片和AAAA ，鼠标移动到222 在显示区域 显示图片和BBBB，鼠标移动到3333 在显示区域 显示图片和CCCC 我想改成 鼠标移动到1111 在显示区域 显示图片和BBBB ，鼠标移动到222 在显示区域 显示图片和DDDD,想增加个编号 要显示哪个 只要更改编号 就能显示那个。这样说能明白吗？ 
      

  3.   

    谢谢 四楼的兄弟 你改的已经可以了。要是能在 这里也加上 编号就更好了。      <DIV id=au style="WIDTH: 325px">
          
          <DIV class=dis name="f"><A href="#"><IMG src="images/01.jpg" ></A>AAAA</DIV>
          
          <DIV class=undis name="f"><A href="#"><IMG src="images/02.jpg" ></A>BBBB</DIV>      <DIV class=undis name="f"><A href="#"><IMG src="images/03.jpg" ></A>CCCC</DIV>
          
          <DIV class=undis name="f"><A href="#"><IMG src="images/04.jpg" ></A>DDDD</DIV>
          
          <DIV class=undis name="f"><A href="#"><IMG src="images/05.jpg" ></A>EEEE</DIV>    
          
          <DIV class=undis name="f"><A href="#"><IMG src="images/06.jpg" ></A>FFFF</DIV>                    
      
          </DIV>