WEB/JavaScript

[JavaScript] change 이벤트 : 사진 슬라이더

developer of the night sky 2023. 10. 12. 14:36

🔻사진 슬라이더🔻

콤보박스로 선택한 값에 따라 사진을 이동시킨다.

키보드 방향키로도 사진 이동가능하게 한다.

 

기본 뼈대

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #box {
            border: 10px solid cornflowerblue;
            width: 250px;
            height: 188px;
            overflow: hidden;
        }

        #list {
            /* 이미지 가로 정렬 */
            width: 1250px;
            display: flex;
            transition: all 1s;
        }
    </style>
</head>
<body>

    <h1>고양이</h1> 

    <div id="box">
        <div id="list"  >
            <img src="../asset/images/cat01.jpg">
            <img src="../asset/images/cat02.jpg">
            <img src="../asset/images/cat03.jpg">
            <img src="../asset/images/cat04.jpg">
            <img src="../asset/images/cat05.jpg">
        </div>
    </div>

    <hr>

    <select id="sel1">
        <option value="1">고양이1</option>
        <option value="2">고양이2</option>
        <option value="3">고양이3</option>
        <option value="4">고양이4</option>
        <option value="5">고양이5</option>
    </select>
    
</body>
</html>

 

이벤트

    <script>

        const list = document.getElementById('list');
        const sel1 = document.getElementById('sel1');

        let dist = 0;

        sel1.addEventListener('change', function() {
            list.style.transform = `translate(-${(sel1.value-1) * 250}px, 0px)`;
        });

        window.onkeydown = function() {
            list.style.transform = `translate(-${(event.keyCode-49)*250}px, 0px)`
        }

    </script>

 

 

 

 

저작자표시 (새창열림)