0

我有以下代码可以正常工作并每 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);

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

请参阅此示例http://jsfiddle.net/w5YHY/1/

我希望循环应该继续，但是当我点击第三个收音机时，第三个元素 #three 应该显示并且循环应该从四个继续。同样单击第一个收音机，#One 应该显示并且循环应该从第二个元素开始

4

1 回答 1

0

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

这是我的小提琴

首先我将你的超时设置为一个变量，这样我就可以在点击事件中清除它。

var animLoop; // declared outside the function

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

我更改了以下行。

$self.fadeOut(1000);

为此，在调用新循环时确保 div 的淡出正确。

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

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

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

    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")));    
});
于 2013-11-12T16:53:31.797 回答