显示不同间隔的图像答案

【问题标题】：displaying images with different intervals显示不同间隔的图像
【发布时间】：2018-01-21 03:25:18
【问题描述】：

我正在尝试显示一组图像，这些图像将相互替换，但它们之间会有 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秒

【问题讨论】：

能否请您包含images_array 变量的数据树？不能 100% 确定这是在 jQuery 中传递给 .append() 的可行变量
添加到原始帖子的编辑中
几点：如果你把所有的超时设置在一个循环中，它们都会一个接一个地执行。例如，假设您有 5 张图像，控制台应立即输出：“”、“”、“”、“”、“”，然后在 500 毫秒内：“ 2”、“2”、“2”、“2”、“2”，然后再过 2500 毫秒：“1”、“1”、“1”、“1”、“1”。理论上，您应该在执行代码 3 秒后看到 5 张图像。
我什么也没看到，但很高兴知道
toggleClass 如果该类不存在则添加该类，如果存在则将其删除。所以不要使用$("body").toggleClass("whiteBody");，而是使用$("body").toggleClass("blackBody");。如果 body 最初有一个 blackBody 类，那么第一次将被删除，第二次添加

标签： javascript jquery html

【解决方案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);

【讨论】：

两个问题。 a）应该可以将整个屏幕设置为黑色，而不仅仅是那个div？ b）说我想添加另一个任务。 15 分钟后停止该循环并仅在按键后继续。我需要在整个代码周围设置另一个 setTimeout 吗？
谢谢你，由于某种原因，黑色的东西在我的电脑上不起作用，但我会尝试调试它。我正在尝试设置身体，我得到的是图像背景中的黑白迭代。
@Quantico 你可以问一个单独的问题，我会尽力帮助你

【解决方案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>

【讨论】：

这看起来像是一个可能的解决方案，但您应该添加一个解释，因为这对于初学者来说不容易阅读。
我的英文不太好，所以可能很难用英文添加评论