<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#XO {
background-color: #A5DEFF;
display: flex;
}
div.square {
height: 100px;
width: 100px;
cursor: pointer;
}
div.square img {
height: 100px;
width: 100px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
let elem = document.querySelector("#XO");
let src = ["https://via.placeholder.com/150/0000FF/FFFFFF/?text=+empty", //заменить на свои ссылки 'empty.png' и т.д.
"https://via.placeholder.com/150/0000FF/FFFFFF/?text=+circle",
"https://via.placeholder.com/150/0000FF/FFFFFF/?text=+cross",
"https://via.placeholder.com/150/0000FF/FFFFFF/?text=+dus",
"https://via.placeholder.com/150/0000FF/FFFFFF/?text=+puat",
"https://via.placeholder.com/150/0000FF/FFFFFF/?text=+chest",
"https://via.placeholder.com/150/0000FF/FFFFFF/?text=+seem",
"https://via.placeholder.com/150/0000FF/FFFFFF/?text=+voosem",
"https://via.placeholder.com/150/0000FF/FFFFFF/?text=+deeviat",
"https://via.placeholder.com/150/0000FF/FFFFFF/?text=+des",
"https://via.placeholder.com/150/0000FF/FFFFFF/?text=+odincat"
];
let len = src.length;
let num = 51;//сколько блоков создать
let arr = Array.from({
length: num
}, v => `<div class="square" data-index="0"><img src = '${src[0]}'></div>`)
elem.insertAdjacentHTML("beforeend", arr.join(''));
let up = 1;
document.addEventListener("keydown", function(e) {
if (e.shiftKey) up = -1;
})
document.addEventListener("keyup", function(e) {
up = 1;
})
elem.addEventListener("click", function({
target
}) {
if (target = target.closest(".square")) {
let index = +target.dataset.index;
index = (index + len + up) % len;
target.dataset.index = index;
target.querySelector("img").src = src[index];
};
})
})
</script>
</head>
<body>
<div id="XO"></div>
</body>
</html>