changing_images.js

const frame = document.querySelector('#frame');  // 10 sheklin divlerini saxlayan cherchive
const images = [
    // 30 dene shekil
    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30
];  // butun shekiller
let imagesOnScreen = images.slice(0, 10);  // ekrandaki shekiller, ilk 10 denesi initialize olunur
let timeInterval = 1000 + Math.random() * 4000;  // 1 saniye ile 5 saniye arasinda bir random interval

const locateImagesInDivs = () => {
    // imagesOnScreen-deki shekilleri #frame-in ichindeki div-lerin ichine yig
    frame.innerHTML = imagesOnScreen.join('~');    
};

locateImagesInDivs();  // shekilleri #frame-in ichine initialize ele
setInterval(() => {
    // 2 dene ferqli random index sechirik imagesOnScreen uchun
    let i = Math.floor(Math.random() * 10), j = Math.floor(Math.random() * 10);
    while (i === j) j = Math.floor(Math.random() * 10);
    
    // 2 dene ferqli random index sechirik images uchun
    let k = Math.floor(Math.random() * 30), x = Math.floor(Math.random() * 30);
    while (k === x) x = Math.floor(Math.random() * 30);
    
    // yoxlayiriq ki icheride onsuz da olan shekli getirmesin
    while (imagesOnScreen.includes(images[k]) || imagesOnScreen.includes(images[x])) {
        k = Math.floor(Math.random() * 30), x = Math.floor(Math.random() * 30);
        while (k === x) x = Math.floor(Math.random() * 30);
    }
    
    // i ve j index-li olan shekilleri deyishirik k ve x ile
    imagesOnScreen[i] = images[k];
    imagesOnScreen[j] = images[x];
    
    // yeni shekilleri #frame-in ichine yig
    locateImagesInDivs();
    
    // interval-i random reset eliyirik
    timeInterval = 1000 + Math.random() * 4000;
}, timeInterval);