사진 슬라이드 쇼를 만들기 위한 간단한 JavaScript 예제를 제공해 드리겠습니다. 이 예제에서는 HTML, CSS 및 JavaScript를 사용하여 사진 슬라이드 쇼를 생성하는 방법을 보여줍니다.
HTML 파일 생성:
HTML 파일을 생성하고 사진 슬라이드 쇼를 표시할 영역을 만듭니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>사진 슬라이드 쇼</title>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="image1.jpg" alt="사진 1">
</div>
<div class="mySlides fade">
<img src="image2.jpg" alt="사진 2">
</div>
<!-- 추가 이미지를 위해 위의 구조를 반복합니다. -->
</div>
<script src="script.js"></script>
</body>
</html>
CSS 스타일 시트 생성:
CSS 파일(styles.css)을 생성하고 슬라이드 쇼의 스타일을 정의합니다.
/* styles.css */
.slideshow-container {
position: relative;
max-width: 800px;
margin: auto;
}
.mySlides {
display: none;
}
img {
width: 100%;
height: auto;
}
JavaScript 파일 생성:
JavaScript 파일(script.js)을 생성하고 슬라이드 쇼를 제어하는 코드를 추가합니다.
// script.js
let slideIndex = 0;
function showSlides() {
let slides = document.querySelectorAll('.mySlides');
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();
결과 확인:
웹 브라우저에서 HTML 파일을 열어서 사진 슬라이드 쇼가 동작하는 것을 확인합니다.
이미지가 바뀌는걸 확인 할수 있습니다.
'HTML 예제' 카테고리의 다른 글
| 시계 애플리케이션: JavaScript로 디지털 시계 애플리케이션 만들기 (2) | 2023.12.06 |
|---|---|
| 파티클 시뮬레이션: HTML5 <canvas>를 사용하여 파티클 시뮬레이션 만들기 (1) | 2023.12.06 |
| 실시간 통계: JavaScript로 실시간 통계 표시 (0) | 2023.12.06 |
| 도넛 차트: JavaScript와 HTML5 <canvas>로 도넛 차트 생성 (0) | 2023.12.06 |
| 반응형 테이블: CSS 미디어 쿼리를 사용하여 반응형 테이블 디자인 (0) | 2023.12.06 |
