86 lines
1.7 KiB
JavaScript
86 lines
1.7 KiB
JavaScript
MAX_IMG_NUMBER = 7
|
|
ASSET_PATH = "\"assets/frame1/"
|
|
ASSET_SUFFIX = ".JPG\""
|
|
|
|
var frames = [
|
|
{
|
|
DOMElement : "",
|
|
IMGCounter : 0,
|
|
},
|
|
{
|
|
DOMElement : "",
|
|
IMGCounter : 0,
|
|
},
|
|
{
|
|
DOMElement : "",
|
|
IMGCounter : 0,
|
|
}
|
|
]
|
|
|
|
FOOBAR = ""
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
frames[0].DOMElement = document.querySelector("#left.side .frame")
|
|
frames[1].DOMElement = document.querySelector("#right.side .frame")
|
|
|
|
frames.forEach(function(val, i) {
|
|
if (frames[i].DOMElement != "") {
|
|
nextImage(frames[i])
|
|
}
|
|
});
|
|
|
|
}, false);
|
|
|
|
document.addEventListener("keypress", function(keyEvent) {
|
|
switch (keyEvent.key) {
|
|
case "q":
|
|
targetFrame = frames[0]
|
|
prevImage(targetFrame)
|
|
break;
|
|
case "w":
|
|
targetFrame = frames[0]
|
|
nextImage(targetFrame)
|
|
break;
|
|
case "a":
|
|
targetFrame = frames[1]
|
|
prevImage(targetFrame)
|
|
break;
|
|
case "s":
|
|
targetFrame = frames[1]
|
|
nextImage(targetFrame)
|
|
break;
|
|
case "y":
|
|
targetFrame = frames[2]
|
|
prevImage(targetFrame)
|
|
break;
|
|
case "x":
|
|
targetFrame = frames[2]
|
|
nextImage(targetFrame)
|
|
break;
|
|
}
|
|
}, false);
|
|
|
|
function nextImage(targetFrame) {
|
|
console.log(targetFrame)
|
|
if (targetFrame.IMGCounter >= MAX_IMG_NUMBER) {
|
|
targetFrame.IMGCounter = 0
|
|
} else {
|
|
targetFrame.IMGCounter++
|
|
}
|
|
|
|
setFrameImage(targetFrame.DOMElement, ASSET_PATH + targetFrame.IMGCounter + ASSET_SUFFIX)
|
|
}
|
|
|
|
function prevImage(targetFrame) {
|
|
if (targetFrame.IMGCounter <= 0) {
|
|
targetFrame.IMGCounter = MAX_IMG_NUMBER
|
|
} else {
|
|
targetFrame.IMGCounter--
|
|
}
|
|
|
|
setFrameImage(targetFrame.DOMElement, ASSET_PATH + targetFrame.IMGCounter + ASSET_SUFFIX)
|
|
}
|
|
|
|
function setFrameImage(frame, imgPath) {
|
|
frame.style.backgroundImage = "url(" + imgPath + ")"
|
|
} |