Jquery 基于单选按钮单击循环并设置动画

我有下面一段代码，它工作正常，每3秒旋转一次div

var $elements = $('#One, #Two, #Three, #Four');
function anim_loop(index) {
    $elements.eq(index).fadeIn(1000, function() {
        var $self = $(this);
        setTimeout(function() {
            $self.fadeOut(1000);
            anim_loop((index + 1) % $elements.length);
        }, 3000);
    });
}
anim_loop(0); 

如果我要通过单选按钮来控制循环，我该如何控制循环

看这个例子

---

我希望循环应该继续，但当我单击第三个收音机时，第三个元素#3应该显示，循环应该从4继续。类似地，单击第一个收音机时，应显示并从第二个元素开始循环

您可以使用单击事件停止循环，并根据您选择的收音机使用新索引重新启动循环

这是我的

首先，我将超时设置为一个变量，以便在单击事件中清除它

var animLoop; // declared outside the function

animLoop = setTimeout(function() { // set in the function

我改了下面一行

$self.fadeOut(1000);

以确保调用新循环时div的淡出正确

$("div").fadeOut(1000);

然后在收音机的点击事件中，我得到收音机的id，我将其设置为与div的正确索引相对应，并将其传递到新的anim_循环中。 希望这就是你想要的

下面是基于您的小提琴的代码

    var $elements = $('#One, #Two, #Three, #Four');
var animLoop;
function anim_loop(index) {
    $elements.eq(index).fadeIn(1000, function() {
        var $self = $(this);
        $("#"+(index)).prop("checked", true);
        animLoop = setTimeout(function() {
            $("div").fadeOut(1000);
            //$self.fadeOut(1000);
            anim_loop((index + 1) % $elements.length);
            $("input").prop("checked", false);
            $("#"+(index +1)).prop("checked", true);
        }, 3000);
    });
}

anim_loop(0); // start with the first element
$("input").click(function()
{
  $("div").fadeOut();
  clearTimeout(animLoop);
  anim_loop(parseFloat($(this).attr("id")));    
});

---

我有一个问题。收音机操纵环路。我怎样才能反过来呢？在循环过程中选择radio。所以，如果循环是位置2，选择第二个收音机，这样你就可以在循环$（“#”+（index+1））.prop（“选中”，true）中执行类似操作；我会在我的帖子和小提琴中更新代码。