Переключение источника изображения с классом не работает,

Question

Я пытаюсь переключить изображение на другое, изменив его исходный путь, и в то же время добавляю в него класс css при каждом переключении. Однако я не могу найти правильный способ сделать это часами. Я просто новичок в javascript.

Это то, что я пробовал до сих пор:

HTML:

<div class="content">
                <div class="animBox">
                    <img src="images/astroboy2.png" class="astroboy2">
                    <img id="iconsID" src="images/Pencil.png" class="icons"> // this is the image I'm working on.
                </div>
</div>

CSS:

 .icons {
    position: relative;
    top: 30%;
    right: 23%;
    height: 50%;
}

JS: (Я создал массивы для ссылок на пути к изображениям)

let IMG = {
    imageToswitch: document.getElementById("iconsID");
    imagePath: ["images/Ps_Logo.png", "images/Pencil.png", "images/joystick.png"],
    indexPos: 0,

    switching: () => {
    setInterval(() => {
        if (IMGS.indexPos == 2) {
            IMGS.indexPos = 0;
        }
        IMGS.icons.classList.add("icons");
        IMGS.icons.src = IMGS.imagePath[IMGS.indexPos];
        IMGS.indexPos++;
        IMGS.icons.classList.remove("icons");
    }, 900);
}
}

единственное, что здесь работает, - это переключение источника изображения, но класс css не работает, что делает изображения не в правильном положении и размерах.

Answer 1

Не могли бы вы сделать 3 отдельных класса для соответствия каждому источнику, а затем обработать это таким образом?

sources = ["src1","src2","src3"];
classes = ["class1","class2","class3"]
x = document.getElementById("eleID");
count = 0;
setInterval(function() {
x.src = sources[count];
x.className = classes[count];
if(count++==2){count=0}
},900)