Question

我正在尝试显示相互替换的图像数组，但它们之间会有0.5秒的黑屏。

例如array_img = [“im1”，“im2”，“im3”] 显示im1持续3秒，显示黑屏0.5秒，显示im2持续3秒，黑屏持续0.5秒......

我的代码是 images_array是一个全局变量。 time_between_images = 3000并且是全局变量 time_for_black_screen = 500并且是全局变量

function displayImages(){
    for (i = 0; i < images_array.length; i++) {
        console.log(images_array[i]);
        setTimeout(function () {
            console.log("1");
            $('#exprBody').css('background-color', 'white');
            $('#picture_frame').append(images_array[i]);
        }, time_between_images)


        setTimeout(function () {
            console.log("2");
            $("#picture_frame img:last-child").remove()
            $('#exprBody').css('background-color', 'black');
        }, time_for_black_screen)
    }
    console.log(images_array);

}

我的HTML很简单

<body>
<div id="experiment_frame">
    <div id="header">
        <div id="left_cat"></div><div id="right_cat"></div>
    </div>
    <div id="picture_frame" class="centered">
        <div id="exp_instruct"></div>
    </div>
</div>
</body>

我以为我应该使用setTimeout，因为我想在数组中的每个图像的两个任务之间切换。 IMG +黑屏，IMG +黑屏但我的页面上没有显示任何内容。

数组

["<img src='/images/cute/1223.jpg'>", "<img src='/images/cute/1235.jpg'>", "<img src='/images/disgusted/8878.jpg'>", "<img src='/images/disgusted/8898.jpg'>", "<img src='/images/neutral/3321.png'>", "<img src='/images/neutral/3445.png'>"]

编辑：

function displayImageIter(number) {
    $("body").toggleClass("whiteBody");
    $("#picture_frame").empty().append(images_array[number]);
    setTimeout(function () {
        $("#picture_frame").empty();
        $("body").toggleClass("blackBody");
        setTimeout(function () {
            displayImageIter((number + 1) % images_array.length);
        }, time_for_black_screen)
    }, time_between_images)
}

出于某种原因，我对此代码的看法是 IMG白色背景空白屏幕白色0.5秒 IMG黑色背景空白屏幕白色0.5秒

Answer 1

请看下面的简化代码：

function displayImage(number) {
    $("#picture_frame").empty().append(images_array[number]).css('background-color', 'white');
    setTimeout(function () {
        $("#picture_frame").empty().css('background-color', 'black');
        setTimeout(function () {
            displayImage((number + 1) % images_array.length);
        }, time_for_black_screen)
    }, time_between_images)
}

const images_array = ["FIRST IMAGE", "SECOND IMAGE", "THIRD IMAGE"];
const time_between_images = 3000;
const time_for_black_screen = 500;

displayImage(0);

#picture_frame {width: 200px; height: 100px; background-color: white}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="picture_frame"></div>

回答你的评论：

a）要更改父div背景，请使用：

$("#picture_frame").empty().append(images_array[number]);
$("#parent_div").css('background-color', 'white');

b）要停止此循环，您可以使用一些标志并在15分钟后将其设置为false：

function displayImage(number) {
    $("#picture_frame").empty().append(images_array[number]).css('background-color', 'white');
    setTimeout(function () {
        $("#picture_frame").empty().css('background-color', 'black');
        setTimeout(function () {
            //continue only if flag is true
            if (flag) displayImage((number + 1) % images_array.length);
        }, time_for_black_screen)
    }, time_between_images)
}

const images_array = ["FIRST IMAGE", "SECOND IMAGE", "THIRD IMAGE"];
const time_between_images = 3000;
const time_for_black_screen = 500;

let flag = true;

displayImage(0);

//used 15 seconds here for simplicity
setTimeout(() => flag = false, 15000);

Answer 2

<a class="img0"></a>
<a class="img1"></a>
<a class="img2"></a>
<script>
  var elArr = [];
  // here get the els that you wanna to display img
  elArr.push(document.querySelector('.img0'));
  elArr.push(document.querySelector('.img1'));
  elArr.push(document.querySelector('.img2'));
  // here is the img src and it's interval
  var imgArr = [
    { src: 'a', interval: 3000 },
    { src: 'b', interval: 2000 },
    { src: 'c', interval: 1000 },
  ];
  //  if you wanna auto display unknown number imgs, set a variable to count the whole interval
  var sumInterval = 0;
  for (var i = 0; i < imgArr.length; i++) {
    // the first interval is 3000, second is 5000, third is 6000
    sumInterval += imgArr[i].interval;
    setTimeout(function () {
      elArr[i].innerHTML = imgArr[i].src;
      // if is the last img, set an interval and then do the callback
      if (i == imgArr.length - 1) {
        setTimeout(function () {
          alert('now screen shall be black');            
        }, 500)
      }
    }, sumInterval);
  }
</script>

以不同的间隔显示图像

2 个答案: