无限定时器循环

Question

我想将进度条与图像幻灯片相匹配，其中图像每 3.5 秒淡出一次。

进度条应填满屏幕（与幻灯片的持续时间相匹配）然后消失并在新幻灯片中重新出现。

现在，我有这个：

function progress(percent, $element) {
    $element.find('div').animate({width:percent+'%'}, 3500);
}

progress(100, $('#progressBar'));
var progressClone = $('#progressBar').clone();

setInterval(function() {
    $('#progressBar').remove();
    $(progressClone).appendTo('#wrapBg');
    progress(100, $('#progressBar'));
}, 3500);

它工作正常但只有两次。然后第三张幻灯片，进度条没有消失...

我在控制台没有报错...

HTML :

<div id="wrapBg">
    ///SLIDER ///
    <div id="progressBar"><div></div></div>
</div>

你知道问题出在哪里吗？

Answer 1

我对所有这些都不是完全有信心，但问题之一是您正在克隆一个带有 id 的元素（应该只有一个带有 id 的元素）。但是，jQuery 可能正在搜索具有该 ID 的所有元素（不确定），当您删除它时，您可能无法克隆它。相反，您可能需要考虑动态创建元素并将其附加到幻灯片。

//inside the interval
$('#progressBar').remove();
var progressBar = $('<div/>').prop('id', 'progressBar').html('<div/>');
progressBar.appendTo('#wrapBg');
progress(100, progressBar);

无限定时器循环

Infinite timer loop

jquery

loops

timer

intervals