图片轮换的问题，

想实现一个图片轮换的效果，图片下面有两个div，点击分别可以切换到上一张，下一张图片，不点击的时候，图片定时轮换，现在我改动了，点击后，图片切换个不停，对js实在是不会，把源码贴出来，希望能有高手帮我解决，谢谢了。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<style type="text/css">
img {border:0px;}
#pre
{
  background-image:url(images/pre.jpg); 
  background-repeat:no-repeat; 
  float:right; 
  width:25px; 
  height:22px;
  cursor:pointer;
}
#next
{
  background-image:url(images/next.jpg); 
  background-repeat:no-repeat;
  float:right; 
  width:26px;
  height:22px;
  cursor:pointer;
}
</style>
<script>
var NowFrame = 1;
var MaxFrame = 3;
var bStart = 0;
function fnToggle()
{
var next = NowFrame + 1;
if(next == MaxFrame+1) 
{
NowFrame = MaxFrame;
next = 1;
}
if(bStart == 0)
{
bStart = 1;
setTimeout('fnToggle()', 1000);
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>
</head><body>
<div id="test" style="background-color:Black;width:100%; height:150px;"> 
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>  
    
        <div id=oTransContainer style="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward'); WIDTH: 165px; HEIGHT: 103px">
            <a href="#" target="_blank"><img class=pic id=oDIV1 src="images/01.jpg" width=788 height=150>
                
            </a>
            <a href="#" target="_blank"><img class=pic id=oDIV2 src="images/02.jpg" width=788 height=150 style="DISPLAY: none;"></a>
            <a href="#" target="_blank"><img class=pic id=oDIV3 src="images/03.jpg" width=788 height=150 style="DISPLAY: none;"></a>
            
        </div>
        
    </td>
  </tr>
</table></div>
<div style="margin:0px auto; width:788px; height:22px;">
<div id="next"></div>
<div id="pre"></div>
</div>
</body>
</html>

解决方案 »

  1.   


    function changenext()
    {
      clearTimeout('fnToggle()');
      NowFrame=NowFrame+1;
      if(NowFrame==3)
      {
        NowFrame=1;
      }
      fnToggle();
    }就是在FnToggle()方法下面加了个changenext()的函数，用于下一张点击的。但是不行呀。。
      

  2.   

    貌似不能clearTimeout('fnToggle()');这样写吧要有一个变量iTime=setTimeout("aa()",10000);
    clearTimeout(iTime);这样才行吧
      

  3.   

    楼主写的代码不统一。
    除了楼上说的把clearTimeout('fnToggle()');改正之外，要把changenext()里的fnToggle()改为setTimeout，这样可以保证你在点击next切换到下一张图片之后不会立即切换到下一张，而是正常的等待6妙后切换，如下：function changenext()
        {
          clearTimeout(iTime);
          NowFrame=NowFrame+1;
          if(NowFrame==3)
          {
            NowFrame=1;
          }
          iTime = setTimeout("fnToggle()",6000);
          //iTime要设为全局变量  
        }
      

  4.   

    楼主试一下这样。把你程序里调用setTimeout的地方改为if(iTime)
    {
         clearTimeout(iTime);
    }
    iTime = setTimeout("fnToggle()",4000);至于changeNext函数简单的写成这样就可以了function changeNext()
    {
         fnToggle();
    }试一下，应该是有效的。