Javascript改变图片答案

【问题标题】：Javascript changing picturesJavascript改变图片
【发布时间】：2016-06-16 14:38:48
【问题描述】：

所以我用两张图片和setInterval随着时间的推移不断地改变两张图片。当我点击图片时，我将使用clearInterval 冻结图像。我的问题是当我点击它时如何让这两个图像再次连续变化？所以这就像一个开和关的场景。下面是使两张图片不断变化的代码，当我点击它时，图像冻结并且它们之间没有变化。

var imageArray = ["_images/korea.jpg","_images/images.jpg"];
var imageIndex = 0;
function changeImage(){
    myImage.setAttribute("src", imageArray[imageIndex]);
    imageIndex++;
    if(imageIndex >= imageArray.length){
        imageIndex = 0;
    }
}
var test = setInterval(changeImage, 1000);
myImage.onclick = function(){
    clearInterval(test);
}

【问题讨论】：

有一些布尔值，设置在onclick之外。在 onclick 中，在该值上进行分支，以便您知道要调用 set 或 clear 哪个东西，然后将 bool 翻转为相反的值。

标签： javascript

【解决方案1】：

点击image，使用Boolean flag 和invert 而不是clearInterval

var imageArray = ["_images/korea.jpg", "_images/images.jpg"];
var imageIndex = 0;
var flag = true;

function changeImage() {
  if (flag) {
    myImage.setAttribute("src", imageArray[imageIndex]);
    imageIndex++;
    if (imageIndex >= imageArray.length) {
      imageIndex = 0;
    }
  }
}
setInterval(changeImage, 1000);
myImage.onclick = function() {
  flag = !flag;
}

或者你可以重新发起setInterval

var imageArray = ["_images/korea.jpg", "_images/images.jpg"];
var imageIndex = 0;
var interval;
var clicked = false;

function changeImage() {
  myImage.setAttribute("src", imageArray[imageIndex]);
  imageIndex++;
  if (imageIndex >= imageArray.length) {
    imageIndex = 0;
  }
}
interval = setInterval(changeImage, 1000);
myImage.onclick = function() {
  if (!clicked) {
    clearInterval(interval);
    clicked = true;
  } else {
    interval = setInterval(changeImage, 1000);
    clicked = false;
  }

}

【讨论】：

【解决方案2】：

有一个布尔变量来决定是否要更改图像。在不清除间隔的情况下单击图像时设置或重置此布尔变量。

var active = true;

myImage.onclick = function(){
   active = !active;
}


function changeImage(){

    if (!active)
       return;

    myImage.setAttribute("src", imageArray[imageIndex]);
    imageIndex++;
    if(imageIndex >= imageArray.length){
        imageIndex = 0;
    }
}

【讨论】：

【解决方案3】：

这可能对你有帮助:)

<img src="img1.png" id="cimg" onclick="trigger()">
<script>
var imageArray = ["img1.png","img2.png"];
var imageobject = document.getElementById("cimg");
var imagecount = -1;
var changable = true;
function changeimage() {
imagecount++
if(imagecount < imageArray.length) {
imageobject.src = imageArray[imagecount];
}
else {
imagecount = -1;
}
}

function loop() {
if(changable) {
changeimage();
setTimeout(function() { loop(); },1000)
}
}
loop();

function trigger() {
if(changable) {
changable = false;
}
else {
changable = true;
loop();
}
}
</script>

【讨论】：

【解决方案4】：

此答案与其他答案不同，因为它清除了计时器，而不是仅检查标志是否已设置。您的 changeImage 操作保持不变。

var flag = false, timer;
function changeAction() {
    if (flag) {
        clearInterval(timer);
    } else {
        timer = setInterval(changeImage, 1000);
    }
    flag = !flag;
}
changeAction();
myImage.onclick = changeAction;

【讨论】：