单击链接时停止功能。 JQuery

我有一个名为rotatePics()的幻灯片，从页面加载开始。我也有一个li的数量，当点击时，将获得该li的值rel。 li的rel与预载的幻灯片图像的id匹配。所以，当点击一个，我想停止当前幻灯片功能名为rotatePics并重新启动它，但解析一个新的整数。单击链接时停止功能。 JQuery

目前正在发生的事情是，我能够运行新的幻灯片功能，但不能代替运行在页面加载时，幻灯片功能。

我需要停止rotatePics()并使用变量number重新启动它，只有后者的函数正在运行。

$('a.main-img').click(function (e) 
{ 
    e.preventDefault(); 

    var clickedLi = $(this).closest('li').attr('rel'); 

    var number = parseInt(clickedLi); 

    rotatePics(number); 

});

这是rotatePics()功能

function rotatePics(currentPhoto){ 

    var numberOfPhotos = $('#banner-holder img').length; 

    currentPhoto = currentPhoto % numberOfPhotos; 

    $('#banner-holder img').eq(currentPhoto).fadeOut(function(){ 
     $('#banner-holder img').each(function (i) 
     { 
      $(this).css('zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos); 
     }); 

     $(this).show(); 

     setTimeout(function() 
     { 
      rotatePics(++currentPhoto); 
     }, 1000); 
    }); 
};

我也知道这预置部分改变了整数代码，这原本只是一个滚动的幻灯片，并没有选择新图像的选项。

来源

2011-12-11 Cecil Theodore

为什么不使用'数据id'而不是滥用'rel'呢？ – ThiefMaster

您可以发布'rotatePics（）'函数的代码吗？这将有所帮助。 –

rels工作，在过去使用它们。 –

清除您的超时如下：

var rotatePicsTimer; 
function rotatePics(currentPhoto){ 

    var numberOfPhotos = $('#banner-holder img').length; 

    currentPhoto = currentPhoto % numberOfPhotos; 

    $('#banner-holder img').eq(currentPhoto).fadeOut(function(){ 
     $('#banner-holder img').each(function (i) 
     { 
      $(this).css('zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos); 
     }); 

     $(this).show(); 

     rotatePicsTimer = setTimeout(function() 
     { 
      rotatePics(++currentPhoto); 
     }, 1000); 
    }); 
}; 

$('a.main-img').click(function (e) 
{ 
    e.preventDefault(); 

    var clickedLi = $(this).closest('li').attr('rel'); 

    var number = parseInt(clickedLi); 

    clearTimeout(rotatePicsTimer); 
    rotatePics(number); 
});

来源

2011-12-11 20:47:58

这正是我所需要的。非常感谢。我只有轻微的问题是它不会淡入，但我会对此进行排序。非常感谢！ –

您只需到setTimeout返回值赋值给一个变量，然后调用clearTimeout。

var timerID; 

// ... 

timerID = setTimeout(function() 
{ 
    rotatePics(++currentPhoto); 
}, 1000); 

// ... 

clearTimeout(timerID);

来源

2011-12-11 20:43:01

单击链接时停止功能。 JQuery

回答

相关问题