幻灯片与计时器

Question

我想知道是否有幻灯片显示倒计时器的图像幻灯片。

我正在制作锻炼应用程序，需要一个课程选项。在课程选项中，它将显示20秒的练习，然后休息10秒等，直到课程结束。

我准备好所有的练习，在图像中。我只需要一个代码来显示图像幻灯片，并带有倒数计时器。

谢谢！

Answer 1

带有计时器的幻灯片显示将使用setInterval()方法。试试这个：

<img src="some_source/to/file.png" alt="text" />

然后您可以运行一个函数来将其src属性更改为

setInterval(changeAttr, 20000);
function changeAttr() {
  $('img').attr('src', 'next_image.png');
}

您可以使用if else块来更改图像：

if($('img').attr('src') == 'some_image_file.png') {
  $('img').attr('src', 'new_image_file.png');
}

现在计时器将每20秒执行一次，并将更改图像的源属性。它将使用if else块来确定要将哪个图像设置为幻灯片图像。