lishaozhang

image的多张图片如何切换

解决方案 »

  1.   

    要用到JS的;
    var NowImg = 1;
    var bStart = 0;
    var bStop =0;function fnToggle() 
    {
    var next = NowImg + 1; if(next == MaxImg+1) 
    {
    NowImg = MaxImg;
    next = 1;
    }
    if(bStop!=1)
    { if(bStart == 0)
    {
    bStart = 1;
    setTimeout('fnToggle()', 4000);
    return;
    }
    else
    {
    oTransContainer.filters[0].Apply(); document.images['oDIV'+next].style.display = "";
    document.images['oDIV'+NowImg].style.display = "none";  oTransContainer.filters[0].Play(duration=2); if(NowImg == MaxImg) 
    NowImg = 1;
    else
    NowImg++;
    }
    setTimeout('fnToggle()', 4000);
    }
    }
    function toggleTo(img)
    {
    bStop=1;
    if(img==1)
    {
    document.images['oDIV1'].style.display = "";
    document.images['oDIV2'].style.display = "none"; 
    document.images['oDIV3'].style.display = "none"; 
    document.images['oDIV4'].style.display = "none"; 
    }
    else if(img==2)
    {
    document.images['oDIV2'].style.display = "";
    document.images['oDIV1'].style.display = "none"; 
    document.images['oDIV3'].style.display = "none"; 
    document.images['oDIV4'].style.display = "none"; 
    }
    else if(img==3)
    {
    document.images['oDIV3'].style.display = "";
    document.images['oDIV1'].style.display = "none"; 
    document.images['oDIV2'].style.display = "none"; 
    document.images['oDIV4'].style.display = "none"; 
    }
    else if(img==4)
    {
    document.images['oDIV4'].style.display = "";
    document.images['oDIV1'].style.display = "none"; 
    document.images['oDIV2'].style.display = "none"; 
    document.images['oDIV3'].style.display = "none"; 
    }}
    Html页面
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    <SCRIPT src="js/article.js"></SCRIPT>
    <link href="css/css.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <table width="312" border="0" align="center" cellpadding="0" cellspacing="0" class="solidbox">
      <tr>
        <td width="312" height="312" align="center"><TABLE border=0 align="center" cellPadding=0 cellSpacing=0>
          <TBODY>
            <TR>
              <TD><DIV id=oTransContainer 
                style="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward'); WIDTH: 220px; HEIGHT: 194px"><A 
                href="http://www.webkkk.com/sygj/ggdm.htm" 
                target=_blank><IMG id=oDIV1 
                style="DISPLAY: yes;"
                height=300 src="images/01.jpg" 
                width=300 border=0></A><A 
                href="http://www.webkkk.com/sygj/ggdm.htm" 
                target=_blank><IMG id=oDIV2 
                style="DISPLAY: none;"
                height=300 src="images/02.jpg" 
                width=300 border=0></A><A 
                href="http://www.webkkk.com/sygj/ggdm.htm" 
                target=_blank><IMG id=oDIV3 
                style="DISPLAY: none;"
                height=300 src="images/03.jpg" 
                width=300 border=0></A><A 
                href="http://www.webkkk.com/sygj/ggdm.htm" 
                target=_blank><IMG id=oDIV4 
                style="DISPLAY: none;"
                height=300 src="images/04.jpg" 
                width=300 border=0></A></DIV>
              </TD>
            </TR>
          </TBODY>
        </TABLE></td>
      </tr>
      <tr>
        <td height="22" align="right" valign="top"><script>var MaxImg = 4; fnToggle();</script>
          <TABLE cellSpacing=1 cellPadding=0 width=110 
                  border=0>
          <TBODY>
            <TR>
              <TD width=26><A href="javascript:toggleTo(1)"><IMG height=15 
                      src="images/s_1.gif" width=17 
                      border=0></A></TD>
              <TD width=26><A href="javascript:toggleTo(2)"><IMG height=15 
                      src="images/s_2.gif" width=17 
                      border=0></A></TD>
              <TD width=26><A href="javascript:toggleTo(3)"><IMG height=15 
                      src="images/s_3.gif" width=17 
                      border=0></A></TD>
              <TD width=27><A href="javascript:toggleTo(4)"><IMG height=15 
                      src="images/s_4.gif" width=17 
                      border=0></A></TD>
            </TR>
          </TBODY>
        </TABLE></td>
      </tr>
    </table>
    </body>
    </html>