아래는 HTML, CSS 및 JavaScript를 사용하여 간단한 이미지 슬라이드 쇼를 만드는 코드입니다. 이 코드는 초보자도 이해하기 쉽도록 주석이 추가되어 있습니다.
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>이미지 슬라이드 쇼</title>
<style>
/* 슬라이드 이미지 스타일 지정 */
#slideshow {
width: 400px;
height: 300px;
overflow: hidden;
}
#slides {
display: flex;
animation: slide 5s infinite;
}
.slide {
width: 100%;
height: 100%;
}
@keyframes slide {
0% { transform: translateX(0); }
25% { transform: translateX(-100%); }
50% { transform: translateX(-200%); }
75% { transform: translateX(-300%); }
100% { transform: translateX(0); }
}
</style>
</head>
<body>
<h1>이미지 슬라이드 쇼</h1>
<!-- 슬라이드 이미지 표시 영역 -->
<div id="slideshow">
<div id="slides">
<!-- 이미지 추가 -->
<img class="slide" src="이미지1.jpg" alt="이미지 1">
<img class="slide" src="이미지2.jpg" alt="이미지 2">
<img class="slide" src="이미지3.jpg" alt="이미지 3">
</div>
</div>
<script>
// JavaScript로 슬라이드 쇼 제어
let slideIndex = 0;
function showSlides() {
const slides = document.getElementsByClassName("slide");
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 2000); // 2초마다 이미지 변경
}
showSlides(); // 슬라이드 쇼 시작
</script>
</body>
</html>
'HTML 예제' 카테고리의 다른 글
| 사용자 입력 받기 (0) | 2023.12.07 |
|---|---|
| 버튼 클릭으로 글자 변경 (0) | 2023.12.07 |
| 간단한 타이머 (0) | 2023.12.07 |
| 간단한 계산기 (0) | 2023.12.07 |
| Hello, World! 출력 (0) | 2023.12.07 |
