Question

我正在尝试使它具有两个使用Javascript的按钮，一个按钮使用clearInterval停止图像轮播，效果很好，但是，我也希望另一个按钮重新启动轮播，但是我不知道如何操作这样做。

<img src="images/img1.jpg" id="images" width="200px">
<button type="button" id="stop">Stop the Carousel</button>
<button type="button" id="start">Start the Carousel</button>

<script>
document.getElementById('stop').addEventListener('click', stopit);

var start = 1;
var timer = setInterval(carousel, 2000);

  function carousel(){
    var image_data;
    start =  start % 5;
    image_data = "images/img" + (start+1) + ".jpg";
    document.getElementById('images').src=""+ image_data;
    start++;
  }

  function stopit(){
    clearInterval(timer);
  }

</script>

Answer 1

请在该处使用“开始”，“停止”和“重新启动”按钮，我希望它很有用。

如果您单击重新启动按钮，则出现第一个轮播图片，这意味着它开始工作。

谢谢

Dispatcher

Answer 2

将计时器启动逻辑移至其自己的功能：

<img src="images/img1.jpg" id="images" width="200px">
<button type="button" id="stop">Stop the Carousel</button>
<button type="button" id="start">Start the Carousel</button>

<script>
document.getElementById('stop').addEventListener('click', stopit);
document.getElementById('start').addEventListener('click', startIt);
var start = 1;
var timer

  function carousel(){
    var image_data;
    start =  start % 5;
    image_data = "images/img" + (start+1) + ".jpg";
    document.getElementById('images').src=""+ image_data;
    start++;
  }
  function startIt(){
     if(timer) stopit()
     timer = setInterval(carousel, 2000);
  }
  function stopit(){
    clearInterval(timer);
  }
  startIt() //if you want it to start automatically
</script>

在Javascript中使用clearInterval后重新启动setInterval

2 个答案: