๐ป์ฌ์ง ์ฌ๋ผ์ด๋๐ป
์ฝค๋ณด๋ฐ์ค๋ก ์ ํํ ๊ฐ์ ๋ฐ๋ผ ์ฌ์ง์ ์ด๋์ํจ๋ค.
ํค๋ณด๋ ๋ฐฉํฅํค๋ก๋ ์ฌ์ง ์ด๋๊ฐ๋ฅํ๊ฒ ํ๋ค.
๊ธฐ๋ณธ ๋ผ๋
<!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>
'WEB > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [JavaScript] ์คํฌ๋กค ์ด๋ฒคํธ : ๋ฐฐ๊ฒฝ์, ๊ธ์จ์ ๋ณ๊ฒฝ (0) | 2023.10.12 |
|---|---|
| [JavaScript] tansition ์กฐ์ : ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ์กฐ์ (0) | 2023.10.12 |
| [JavaScript] ํด๋ฆญ ์ด๋ฒคํธ : ๋ฐ์ํ ๋ฉ๋ด๋ฐ ๋ง๋ค๊ธฐ (0) | 2023.10.12 |
| [JavaScript] CSS ์กฐ์ - transition ์ถ๊ฐ (0) | 2023.10.12 |
| [JavaScript] ๋๋๊ทธ์ค๋๋กญ ์ด๋ฒคํธ : ๋ฐ์ค ์ฌ์ด์ฆ ์กฐ์ ํ๊ธฐ (0) | 2023.10.12 |
