var works__item = document.querySelectorAll('.works__item');
То <code lang="javascript">
item.style.display = 'none'; применяется к одному объекту, я вот попробовал через forEach перебрать все
</code>
const image_1 = document.getElementById('site_1');
const image_2 = document.getElementById('site_2');
const image_3 = document.getElementById('site_3');
const image_4 = document.getElementById('site_4');
let key = ["image_1.png", "image_2.png", "image_3.png"];
let Changer = setTimeout(function ChangerFunction() {
const rand = (min, max) => min + Math.floor(Math.random() * (max - min));
image_1.style.opacity = 0;
image_2.style.opacity = 0;
image_3.style.opacity = 0;
image_4.style.opacity = 0;
image_1.src = `img/works/works1/${key[rand(0, 3)]}`;
image_2.src = `img/works/works2/${key[rand(0, 3)]}`;
image_3.src = `img/works/works3/${key[rand(0, 3)]}`;
image_4.src = `img/works/works4/${key[rand(0, 3)]}`;
do {
image_1.style.opacity = image_1.style.opacity + 0.05;
image_2.style.opacity = image_1.style.opacity + 0.05;
image_3.style.opacity = image_1.style.opacity + 0.05;
image_4.style.opacity = image_1.style.opacity + 0.05;
await new Promise(function(s) { setTimeout(s, 50); });
} while (image_1.style.opacity && image_2.style.opacity && image_3.style.opacity && image_4.style.opacity < 1);
Changer = setTimeout(ChangerFunction, 2000);
}, 2000);
image_1.style.opacity = 0;
image_1.src = `img/works/works1/${key[rand(0, 3)]}`;
/*Картинка должна стать видимая через секунду после image_2.src = `img/works/works2/${key[rand(0, 3)]}`;*/
image_1.style.opacity = 1; /*opacity 0 и opacity 1 выполняются очень быстро что даже не заметно разницы*/