2011-03-29 57 views
0

我有一个幻灯片放映效果很好,在图像之间留下了3秒的间隔。javascript - 点击忽略超时

我也有一组动态生成的链接,当点击时,下一个图像对应于该链接。

我想要做的是当点击其中一个链接时跳过3秒钟 - 然后在图像更改后重新启动超时。下面

代码:

$(document).ready(function() { 

var images=new Array(); 
var totalimages=6; 
var totallinks=totalimages; 
var nextimage=2; 

while (totallinks>0) { 
    $(".quicklinks").prepend("<a href='#' class='"+(parseInt(totallinks))+"' onclick='return false'>"+(parseInt(totallinks))+"</a> "); 
    totallinks--; 
} 

function runSlides() { 
    if(runSlides.opt) { 
     setTimeout(doSlideshow,3000); 
    } 
} 

function doSlideshow() 
    { 
     if($('.myImage').length!=0) 
      $('.myImage').fadeOut(500,function(){slideshowFadeIn();$(this).remove();}); 
     else 
      slideshowFadeIn(); 
    } 

function slideshowFadeIn() 
    { 
     if(nextimage>=images.length) 
      nextimage=1; 

     $('.container').prepend($('<img class="myImage" src="'+images[nextimage]+'" style="display:none;">').fadeIn(500,function() { 
      runSlides(); 
      nextimage++; 
     })); 
    } 

if(runSlides.opt) {} else { 
    images=[]; 
    totalimages=6; 
    while (totalimages>0) { 
     images[totalimages]='/images/properties/images/BK-0'+parseInt(totalimages)+'.jpg'; 
     totalimages--; 
    } 
    runSlides.opt = true; 
    runSlides(); 
} 

$(".quicklinks a").live('click', function() { 
    nextimage=$(this).attr("class"); 
}); 


}); 

回答

4

您可以使用此代码停止超时:

var t = setTimeout(myFunction,3000); 
clearTimeout(t); 

利用这一点,当用户点击该按钮可以中止你超时,直接调用该函数。然后您可以重新启动超时。

希望这会有所帮助。