javascript - 单击后如何停止执行javascript？

Question

我有自动改变div 背景的javascript 代码。单击链接时如何停止此脚本。当我单击链接 class="one" 或 class="two" 时，我想停止更改背景并显示带有 class="content"的 div。我想在单击 class="start" 时重新开始更改背景。

$(window).load(function() {
  var i = 0;
  var images = ['koles-3-ok.png', 'koles-3.png'];
  var image = $('.div1');
  var ImgPath = "" //The file path to your images
    //Initial Background image setup
  image.css('background-image', 'url(http://katet.eu/images/koles-3.png)');

  //Change image at regular intervals
  setInterval(function() {
    image.fadeOut(1000, function() {
      image.css('background-image', 'url(' + images[i++] + ')');
      image.fadeIn(1000);
    });
    if (i == images.length)
      i = 0;
  }, 5000);
});

$(document).ready(function() {

  // Optional code to hide all divs
  $(".content").hide();
  // Show chosen div, and hide all others
  $("a").click(function(e) {
    $("#" + $(this).attr("class")).removeClass("hide").fadeIn("slow").siblings('.content').hide();
  });

});

.div1 {
  position: absolute;
  width: 200px;
  height: 200px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 1px solid black;
}
.hide {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="start">Index</a>
<a href="#" class="one">About</a>
<a href="#" class="two" id="slide">Contact</a>

<div class="content hide" id="one">
  <h1>Lorem Impsum 1</h1>
</div>
<div class="content hide" id="two">
  <p>lorem 2
  </p>
</div>

<div class="div1">
  sdcsdf
</div>

jsfiddle: https://jsfiddle.net/omj1/d112y264/

Answer 1

您可以保存 setInterval() 返回的 intervalID，然后使用 clearInterval() 停止它。参见 setInterval()和 clearInterval()