Question

我有一个滑块，可以使用以下功能点击按钮来滑动图像

$(document).ready(function (){
$('#button a').click(function(){
    var integer = $(this).attr('rel');
    $('#myslide .cover').animate({left:-720*(parseInt(integer)-1)}) 
    $('#button a').each(function(){
    $(this).removeClass('active');
        if($(this).hasClass('button'+integer)){
            $(this).addClass('active')}
    });
}); 
});

是否可以使用jquery自动执行此操作？

刚刚发现这个oly不确定我将如何实施它......

setInterval(function() {
      // Do something every 2 seconds
 }, 2000);

Answer 1

首先，将执行动画的函数转换为第一类函数（即，给它命名并将其移出click（））：

function animate() {...}

然后将点击处理程序与：

相关联

$('#button a').click(animate);

然后，使用setInterval（）或setTimeout（）在指定的超时后执行该函数：

setTimeout(animate, 3000);

Answer 2

要在单击按钮后为图像设置动画，可以使用setInterval。我之前的示例使用了setTimeout，即使在您提到setInterval之后也是如此。哎呦。这应该更清洁。

评论应描述正在发生的事情。

请注意，按下按钮时会调用setInterval。每次按下按钮，它都会启动另一个实例。对此的修复归结为您要使用的编码逻辑。如果必须以可以多次调用它的方式设置它，请尝试使用clearInterval（）。

$(function() {
    //Click our link
    $("a").click(function() {
        animateOurImage();
        setInterval(function() { animateOurImage(); }, 3000);
        //Be sure you account for the animation's duration in setInterval.
    }); 
});

function animateOurImage() {
    // We need the .each to access the image with $(this)
    $('.image').animate({
        left: "-=120" //relative to current position
    }, 1000); //Duration
}

以下是一个示例小提琴：http://jsfiddle.net/Yjhwm/

使用jquery自动化滑块？

2 个答案: