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

Answer 2

要实现您想要的效果，可以使用clearInterval（）方法。

$(document).ready(function(){
   var i = 0;
   var myTimer;
   var images = ['http://katet.eu/images/koles-3-ok.png', 'http://katet.eu/images/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)');
      
   myTimer = setInterval(changeBackground, 3000);
      
   function changeBackground() {
         image.fadeOut(1000, function () {
            image.css('background-image', 'url('+ images[i++] +')');
            image.fadeIn(1000);
         });
         if(i == images.length) {
            i = 0;
         }
   }

   $("a").click(function (e) {
         e.preventDefault();
         if($(this).is(".one") || $(this).is(".two")) {
            if (myTimer) { 
               clearInterval(myTimer);
            }
         } 
         else {
            $(".content").hide();
            myTimer = setInterval(changeBackground, 3000);
         }
         $("#" + $(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 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" id="slide">Paintings</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>

Answer 3

嗯，据我说你不能禁用javascript。因为该按钮需要控件（javascript）来启用和禁用用户要求的javascript。那么你可以阻止一些功能，即

function demo(){
document.writeln("Hello, World");
}

HTML按钮标记

<button onClick="demo.stop()">Stop Function</button>

.stop()会阻止demo()执行。

我希望这澄清一下。感谢。

Answer 4

＆＃13;

$(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() {

  $(".start").click(function(e) {
      $(".div1").show();
      $("#one").hide();   
      $("#two").hide();                       
  });
  $(".one").click(function(e) {
      $(".div1").hide();
      $("#one").show();
      $("#two").hide();  
  });
  $(".two").click(function(e) {
      $(".div1").hide();
      $("#one").hide();
      $("#two").show();  
  });
});

＆＃13;

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

＆＃13;

<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" style="display:none;" id="one">
  <h1>Lorem Impsum 1</h1>
</div>
<div class="content" style="display:none;" id="two">
  <p>lorem 2
  </p>
</div>

<div class="div1">
  sdcsdf
</div>

＆＃13;

单击后如何停止执行javascript？

4 个答案: