Question

所以我使用了两张图片和.eq-col-group来随时间连续更改两张图片。当我点击图片时，我将使用setInterval来冻结图片。我的问题是当我点击它时，如何让这两个图像再次连续变化？所以它像场景一样开启和关闭。下面是使两张图片连续变化的代码，当我点击它时，图像会冻结，并且不会在它们之间发生变化。

clearInterval

Answer 1

而不是clearInterval，点击Boolean

，使用flag invert和image

＆＃13;

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;
}

＆＃13;

或您可以重新发起setInterval

＆＃13;

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;
  }

}

＆＃13;

Answer 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;
    }
}

Answer 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>

Answer 4

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

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

Javascript更改图片

4 个答案: