播放动画的销果。要显示点击的数字。

代码如下。
<style type="text/css">
</style><table width="970"  border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#ECEEF0">
  <tr>
    <td width="970"><div id="oTransContainer" 
            style="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward'); WIDTH: 970px; HEIGHT: 315px"> <a href="product.asp?id=3477"><img src="news/news6.jpg" name="oDIV1" width="970" height="315" border="0" class="pic" id="oDIV1" />
              <script>var NowFrame = 1;var MaxFrame =6;var bStart = 0;function fnToggle(){var next = NowFrame + 1;if(next == MaxFrame+1) {NowFrame = MaxFrame;next = 1;}if(bStart == 0){bStart = 1;setTimeout('fnToggle()', 2000);return;}else{oTransContainer.filters[0].Apply();document.images['oDIV'+next].style.display = "";document.images['oDIV'+NowFrame].style.display = "none";oTransContainer.filters[0].Play(duration=2);if(NowFrame == MaxFrame){NowFrame = 1;}else{NowFrame++;}} setTimeout('fnToggle()', 6000);}fnToggle();</script>
    </a> <a href="product.asp?keywords=iphone 4"><img border="0" class="pic" id="oDIV2" src="news/news.jpg" width="970" height="315" style="DISPLAY: none;" /></a> <a href="product.asp?catelog=7&dd=45"><img border="0" class="pic" id="oDIV3" src="news/news2.jpg" width="970" height="315" style="DISPLAY: none;" /></a> <a href="product.asp?keywords=iphone 4"><img border="0" class="pic" id="oDIV4" src="news/news3.jpg" width="970" height="315" style="DISPLAY: none;" /></a> <a href="product.asp?catelog=7&amp;dd=41"><img border="0" class="pic" id="oDIV5" src="news/news4.jpg" width="970" height="315" style="DISPLAY: none;" /></a> <a href="product.asp?id=3545"><img border="0" class="pic" id="oDIV6" src="news/news5.jpg" width="970" height="315" style="DISPLAY: none;" /></a> </div></td>
  </tr>
</table>这是一段播放动画的代码，效果请看，http://www.360bh.com   现在我想在那播放动画的右下角加几个控制按钮。想显示这动画的第一张图片就显示第几张图片，点一下就行的那种。
比如http://bbs.cndw.com/这个上面那图片播放一样的，右下角有控制按钮。麻烦高手帮我改改代码。谢谢。

解决方案 »

  1.   


    楼主，我用button实现了，你参考改为你想要的效果吧
    <html>
    <head>
    </head>
    <body>
    <style type="text/css">
    </style><table width="970" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#ECEEF0">
      <tr>
      <td width="970"><div id="oTransContainer" 
      style="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward'); WIDTH: 970px; HEIGHT: 315px"> <a href="product.asp?id=3477"><img src="news/news6.jpg" name="oDIV1" width="970" height="315" border="0" class="pic" id="oDIV1" />
      <script>var NowFrame = 1;var MaxFrame =6;var bStart = 0;function fnToggle(){var next = NowFrame + 1;if(next == MaxFrame+1) {NowFrame = MaxFrame;next = 1;}if(bStart == 0){bStart = 1;setTimeout('fnToggle()', 2000);return;}else{oTransContainer.filters[0].Apply();document.images['oDIV'+next].style.display = "";document.images['oDIV'+NowFrame].style.display = "none";oTransContainer.filters[0].Play(duration=2);if(NowFrame == MaxFrame){NowFrame = 1;}else{NowFrame++;}} setTimeout('fnToggle()', 6000);}fnToggle(); function noclick(page){document.images['oDIV'+NowFrame].style.display = "none";document.images['oDIV'+page].style.display = "";NowFrame = page }</script>
      </a> <a href="product.asp?keywords=iphone 4"><img border="0" class="pic" id="oDIV2" src="news/news.jpg" width="970" height="315" style="DISPLAY: none;" /></a> <a href="product.asp?catelog=7&dd=45"><img border="0" class="pic" id="oDIV3" src="news/news2.jpg" width="970" height="315" style="DISPLAY: none;" /></a> <a href="product.asp?keywords=iphone 4"><img border="0" class="pic" id="oDIV4" src="news/news3.jpg" width="970" height="315" style="DISPLAY: none;" /></a> <a href="product.asp?catelog=7&amp;dd=41"><img border="0" class="pic" id="oDIV5" src="news/news4.jpg" width="970" height="315" style="DISPLAY: none;" /></a> <a href="product.asp?id=3545"><img border="0" class="pic" id="oDIV6" src="news/news5.jpg" width="970" height="315" style="DISPLAY: none;" /></a>
    </div>
      <input type="button" value="1" onclick="noclick(1)" /><input type="button" value="2" onclick="noclick(2)" /><input type="button" value="3" onclick="noclick(3)" /><input type="button" value="4" onclick="noclick(4)" /> 
      </td>
      </tr>
    </table>
    </body>
    </html>
      

  2.   

    | 1 | 2 | 3 | 4 | <div style="background-color:red;">| <a href="javascript:noclick(1)">1</a> | <a href="javascript:noclick(2)">2</a> | <a href="javascript:noclick(3)">3</a> | <a href="javascript:noclick(4)">4</a> |</div>