<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트 이미지슬라이드</title>
<style>
#carousel01 { width: 100%; position: relative }
.slide { width: 100%; height: 299px;
display: flex; justify-content: center;
align-items: center; position: absolute;
z-index: 0; opacity: 0;
transition: all 1s ease-in-out }
/* 이미지 영역 지정, 이미지 가운데 정렬,
모든 이미지 한곳에 포개어 배치, 투명하게 처리 */
.showing { z-index: 1; opacity: 1 }
/* 이미지를 표시하기 위한 설정 */
</style>
</head>
<body>
<h1>자바스크립트 이미지슬라이드</h1>
<p>마치 유원지의 회전목마처럼 여러 이미지들을
일정간격으로 번갈아 가며 보여주는 기능을 의미</p>
<div id="carousel01">
<div class="slide"><img src="/img/slide1.png"></div>
<div class="slide"><img src="/img/slide2.png"></div>
<div class="slide"><img src="/img/slide3.png"></div>
</div>
<script>
const SHOWING = 'showing';
const firstSlide = document.querySelector('.slide:first-child');
let playslide = () => {
const currentSlide = document.querySelector(`.${SHOWING}`);
// 먼저, showing이라는 선택자를 가진 요소를 찾음
if (!currentSlide) firstSlide.classList.add(SHOWING);
// showing이라는 선택자를 가진 요소가 없으면
// 첫번째 슬라이드에게 showing 선택자를 추가함
else {
currentSlide.classList.remove(SHOWING);
// showing 선택자를 가진 요소에
// showing 선택자를 제거함
const nextSlide = currentSlide.nextElementSibling;
// 현재 슬라이드 기준 다음 형제 슬라이드 요소를 가져옴
if (nextSlide) nextSlide.classList.add(SHOWING);
// 만약 다음 형제 슬라이드가 있다면 showing 선택자 추가
else
firstSlide.classList.add(SHOWING);
// 만약 다음 형제 슬라이드가 없다면
// 첫번째 슬라이드에 showing 선택자 추가
}
};
playslide();
setInterval(playslide, 3000);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트 이미지슬라이드</title>
<style>
#carousel102 {position: relative;
width: 1200px; height: 299px; overflow: hidden; }
/* 캐러셀 전체 영역 지정*/
ul {position: relative; list-style: none;
width: 1200px; height: 299px; }
/* 동그라미 제거*/
li {position: relative; display: block; float: left;
width: 1200px; height: 299px; }
/* 캐러셀 각 개별 이미지 지정 */
</style>
</head>
<body>
<h1>자바스크립트 이미지슬라이드</h1>
<p>마치 유원지의 회전목마처럼 여러 이미지들을 일정간격으로 번갈아 보여주는 기능</p>
<hr>
<div id ="carousel102">
<ul>
<li><img src="/img/slide1.png"></li>
<li><img src="/img/slide2.png"></li>
<li><img src="/img/slide3.png"></li>
</ul>
</div>
<script>
let ul = document.querySelector('ul');
let width = document.querySelector('li').offsetWidth;
// 각 li 요소가 차지하는 너비 계산
let totalWidth = width * 3;
ul.style.width = totalWidth + 'px';
/* 슬라이드 이미지들을 한줄로 이어 붙이기 위해 너비 재조정 */
let moveleftAnimate = ul.animate([
{transform : 'translateX(0px)', offset:0.05 }, //x축으로 이동, 5초의 85%만큼 고정
{transform : 'translateX(-1200px)'}], //나머지 15%만큼 이동시간 가짐 (슬라이드크기1200px만큼)
{duration: 5000 } );
// 프레임별로 제어
moveleftAnimate.onfinish=() => {
let removeitem = ul.removeChild(ul.firstElementChild);
ul.appendChild(removeitem); // 첫번째 없애고 뒤에 다시 붙임
moveleftAnimate.play(); // 애니메이트 반복
};
</script>
</body>
</html>
