我有一个可以正常工作的幻灯片,在图像之间留下3秒的间隙。
我还有一组动态生成的链接,当点击时,下一个图像对应于该链接。
我想要做的是在点击其中一个链接时跳过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");
});
});
答案 0 :(得分:4)
您可以使用以下代码停止超时:
var t = setTimeout(myFunction,3000);
clearTimeout(t);
使用此功能,您可以在用户单击按钮并直接调用该功能时中止超时。然后你可以重新启动超时。
希望这有帮助。