我试图显示一组图像，这些图像将互相替换，但它们之间将有0.5秒的黑屏。
例如，array_img = [“im1”，“im2”，“im3”]显示im1持续3秒，显示黑屏0.5秒，显示im2持续3秒，黑屏持续0.5秒......
我的代码是images_array是一个全局变量。 time_between_images = 3000并且是全局var 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秒
看看以下简化代码：
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 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>