본문 바로가기
HTML／CSS

[HTML/CSS] 슬라이드쇼 만들기

by teamnova 2024. 2. 16.

안녕하세요 오늘은 흔히 볼수 있는 광고 이미지와 같은 HTML과 CSS, 자바스크립트를 사용하여 간단한 자동 이미지 슬라이드쇼를 구현해보겠습니다.

 

코드입니다.

<!DOCTYPE html>
<html>
<head>
<style>
/* CSS 스타일을 내장시키는 태그입니다. */

.Slidesbackground {
margin: 0;
padding: 0;
/* .Slidesbackground 클래스에 대한 스타일을 정의합니다. 여백(margin)과 내부 여백(padding)을 0으로 설정합니다. */
}

.slideshow-image {
border-radius: 3%;
width: 100%;
height: 100%;
overflow: hidden;
/* .slideshow-image 클래스에 대한 스타일을 정의합니다. 이미지의 모서리를 둥글게 하고, 크기를 조정하며, overflow를 숨깁니다. */
}

.mySlides {
border-radius: 3%;
width: 600px;
height: 350px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.5);
/* .mySlides 클래스에 대한 스타일을 정의합니다. 크기, 플렉스 박스 설정, 그림자 효과 등을 적용합니다. */
}

.slideshow-container {
display: flex;
justify-content: center;
position: relative;
margin: auto;
/* .slideshow-container 클래스에 대한 스타일을 정의합니다. 플렉스 박스 설정과 위치, 여백을 조정합니다. */
}

.fade {
animation-name: fade;
animation-duration: 1.5s;
/* .fade 클래스에 대한 스타일을 정의합니다. 이름이 'fade'인 애니메이션과 그 지속 시간을 설정합니다. */
}

@keyframes fade {
from {
opacity: .4
}

to {
opacity: 1
}
/*'fade' 애니메이션에 대한 키 프레임을 정의합니다. 투명도(opacity)가 0.4에서 1로 변화합니다. */
}

</style>
</head>

<body>
<!-- 문서의 본문을 나타내는 부분입니다. 실제로 사용자에게 보여지는 내용을 포함합니다. -->

<span class="slideshow-container">
<!-- 슬라이드쇼를 담는 컨테이너로, .slideshow-container 클래스를 적용합니다. -->

<div class="Slidesbackground">
<!-- 슬라이드쇼의 배경을 위한 div 요소, .Slidesbackground 클래스를 적용합니다. -->
<!-- 아래의 div 요소들은 각각의 슬라이드를 나타냅니다. -->
<!-- 각 슬라이드는 .mySlides 클래스와 .fade 클래스를 적용받으며, 내부에 이미지를 포함합니다. -->
<!-- 이미지 소스는 외부 링크를 통해 지정했습니다. -->
<div class="mySlides fade">
</div>
<div class="mySlides fade">
</div>
<div class="mySlides fade">
</div>
<div class="mySlides fade">
</div>
<div class="mySlides fade">
</div>
<div class="mySlides fade">
</div>
</div>
</span>
<script>
let currentSlideIndex = 0;
// 슬라이드의 총 개수를 'totalSlides' 변수에 저장합니다.
// 이는 'slides' 배열의 길이를 사용하여 계산됩니다.
const slides = document.querySelectorAll(".mySlides");
// 슬라이드의 총 개수를 'totalSlides' 변수에 저장합니다.
// 이는 'slides' 배열의 길이를 사용하여 계산됩니다.
const totalSlides = slides.length;

// 'showSlides'라는 함수를 정의합니다. 이 함수는 슬라이드쇼의 핵심 기능을 담당합니다.
function showSlides() {
// 'slides' 배열의 모든 요소(슬라이드)를 순회합니다.
// 'forEach' 메소드를 사용하여 배열의 각 요소에 대해 함수를 실행합니다.
slides.forEach((slide, index) => {
// 각 슬라이드에 대해, 현재 슬라이드 인덱스와 일치하는지 확인합니다.
// 일치한다면 슬라이드를 보이게 하고 (style.display = 'block'),
// 그렇지 않다면 숨깁니다 (style.display = 'none').
slide.style.display = (index === currentSlideIndex) ? "block" : "none";
});

// 현재 슬라이드 인덱스를 1 증가시킵니다.
// '%' 연산자를 사용하여 값이 'totalSlides'의 개수를 초과하지 않도록 합니다.
// 이 연산은 슬라이드가 마지막에 도달했을 때 다시 첫 번째 슬라이드로 돌아가도록 합니다.
currentSlideIndex = (currentSlideIndex + 1) % totalSlides;

// 'setTimeout' 함수를 사용하여 'showSlides' 함수를 2초(2000밀리초) 후에 다시 호출합니다.
// 이는 슬라이드가 자동으로 전환되도록 하는 타이머 역할을 합니다.
setTimeout(showSlides, 2000);
}
// 'showSlides' 함수를 처음 호출하여 슬라이드쇼를 시작합니다.
showSlides();
</script>

</body>

</html>

 

결과입니다.

 

 

'HTML／CSS' 카테고리의 다른 글

[HTML/CSS] CTA 만들기  (0) 2024.03.07
[HTML/CSS] Bootstrap으로 네비게이션 드로어 만들기  (0) 2024.02.24
[HTML/CSS] 탭 메뉴 만들기  (0) 2024.02.07
[HTML/CSS] 세로 드롭다운 메뉴  (0) 2024.02.06
[HTML/CSS] 버튼 클릭시 나오는 모달창 구현하기  (0) 2024.01.29

관련글

티스토리툴바