Показать сообщение отдельно
  #9 (permalink)  
Старый 01.07.2022, 01:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

<!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>
Ответить с цитированием