I'm trying to make an image switch to another image by changing its source path and at the same time adds css class into it each time it switches. However I cant figure out the the right way to do it for hours now. I'm just new to javascript.
This is what I have tried so far:
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: (I have made an arrays for the path referrence of the images)
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);
}
}
the only thing is happening here is the switching of the image source bat the css class is not working that results to images not on the right position and sizes.
Aucun commentaire:
Enregistrer un commentaire