Nexus, сделал вроде так как Вы советовали, но что вновь пошло не так. Первая картинка (бревно)появляется как надо, а вот от второй и третьей на экран выводятся только их значки, но они появляются и исчезают. вот картинка
Вот код, который у меня получился
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Показать и скрыть</title>
<link rel="stylesheet" href="styles/style.css">
<style type='text/css'>
.brevno {
display:none;
}
.roza {
display:none;
}
.lutik {
display:none;
}
</style>
</head>
<body>
<div class="container">
<div class="image-stack">
<img class="зеленый"
src="pictures/зеленый.png" alt=""/>
<img class="черный"
src="pictures/черный.png" alt=""/>
<img class="blink-image brevno" src="pictures/brevno.gif" alt="бревно"/>
<img class="blink-image roza" src="pictures/roza.png" alt="роза"/>
<img class="blink-image lutik" src="pictures/lutik.png" alt="лютик"/>
</div>
</div>
<script src="scripts/script.js"></script>
</html>
document.querySelectorAll('.blink-image').forEach((image, index) => {
setTimeout(() => image.style.display = "block", (index * 1000) + 3000);
setTimeout(() => image.style.display = "none", (index * 1000) + 10000);
});
я так понимаю, что показ и скрытие картинок будет происходить по в ременным показателям в скрипте, т.е. в одно и тоже время для всех картинок, а надо, чтобы временные показатели для каждой картинки были своими. Что я опять не так сделал?
Ещё раз спасибо за помощь, и мои извинения за назойливость.