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);

无限定时器循环

1 个答案: