HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>수평 슬라이드</title>
<link rel="stylesheet" href="css/slide_horizontality.css">
<script type="text/javascript" src="js/slide_horizontality.js"></script>
</head>
<body>
<div id="container">
<h2 style="text-align: center;">사진을 수평 슬라이드로 보기</h2>
<div style="display: flex;">
<!-- 버튼이 가운데 오게 하기 / 그 중 이미지와 가깝게 하기 위해 margin-right:1% 주기 -->
<div style="margin: auto 1% auto auto;">
<button id="previous">◀</button>
</div>
<!-- div를 두개로 감싼이유는 img들을 좌우배치하고 배치된 사진중 한장만 보이게 하기 위함이다.-->
<div id="slide"> <!-- 배치된 img들을 한개의 img만 보이게 가리기 위한 용도로 사용되는 태그임-->
<div id="images"> <!-- img들을 좌우배치할 태그로서 display 는 flex 로 함 -->
<img src="images/Koala.jpg" />
<img src="images/Lighthouse.jpg" />
<img src="images/Penguins.jpg" />
<img src="images/Tulips.jpg" />
</div>
</div>
<div style="margin: auto auto auto 1%;">
<button id="next">▶</button>
</div>
</div>
<h2 id="msg" style="text-align: center; color: red;"></h2>
</div>
</body>
</html>JS
window.onload = function(){
let current_index = 0; // 현재 인덱스 번호
let positionValue = 0; // images 위치값
const image_width = 900; // 한번 이동 시 image_width 만큼 이동한다.
const btn_previous = document.querySelector("button#previous");
const btn_next = document.querySelector("button#next");
const images = document.querySelector("div#images");
/////////////////////////////////////////////////////////////////////////
// === 이전으로 이동하는 함수 === //
const func_previous = function(){
if(current_index > 0){ // 현재 인덱스번호가 처음이 아닌 두번째 이상인 경우
btn_next.removeAttribute('disabled'); // 다음 버튼을 활성화 상태로 만든다.
// 또는
// btn_previous.setAttribute('disabled', false); // 이전 버튼을 활성화 상태로 만든다.
// 또는
// btn_previous.disabled = false; // 이전 버튼을 활성화 상태로 만든다.
// images 의 위치를 오른쪽으로 이동시키도록 IMAGE_WIDTH 만큼 증가시켜 positionValue에 저장한다.
positionValue += image_width; // 이미지 이동
// x축 방향(가로방향)으로 positionValue 만큼 이동하도록 변형시킨다.
images.style.transform = `translateX(${positionValue}px)`;
// 현재 인덱스번호를 1 감소 시킨다.
current_index--;
// 메시지가 안나오게 하기
document.querySelector("h2#msg").innerHTML = "";
}
else{ // 현재 인덱스번호가 처음인 경우
// 처음 사진일 때 다음버튼을 disabled 로 만든다.
btn_previous.setAttribute('disabled',true); // 비활성화
// 또는
// btn_previous.disabled = true; // 비활성화
document.querySelector("h2#msg").innerHTML = "처음 사진 입니다.";
}
}
// === 다음으로 이동하는 함수 === //
const func_next = function(){
if(current_index < 3){ // 현재 인덱스번호가 마지막(지금은 3)이 아닌 경우
btn_previous.removeAttribute('disabled'); // 이전 버튼을 활성화 상태로 만든다.
// 또는
// btn_previous.setAttribute('disabled', false); // 이전 버튼을 활성화 상태로 만든다.
// 또는
// btn_previous.disabled = false; // 이전 버튼을 활성화 상태로 만든다.
// images 의 위치를 왼쪽으로 이동시키도록 IMAGE_WIDTH 만큼 감소시켜 positionValue에 저장한다.
positionValue -= image_width; // 이미지 이동
// x축 방향(가로방향)으로 positionValue 만큼 이동하도록 변형시킨다.
images.style.transform = `translateX(${positionValue}px)`;
// 현재 인덱스번호를 1 증가 시킨다.
current_index++;
// 메시지가 안나오게 하기
document.querySelector("h2#msg").innerHTML = "";
}
else{ // 현재 인덱스번호가 마지막(지금은 3)인 경우
// 마지막 사진일 때 다음버튼을 disabled 로 만든다.
btn_next.setAttribute('disabled',true); // 비활성화
// 또는
// btn_previous.disabled = true; // 비활성화
document.querySelector("h2#msg").innerHTML = "마지막 사진 입니다.";
}
}
////////////////////////////////////////////////////////////////////////////////////////////////////
// 이전 버튼은 초기화로 사용하지 못하도록 disabled 로 만든다.
btn_previous.setAttribute('disabled', true); // 비활성화
// btn_next.addEventListener('click',function(){}); 이 방법도 있지만 함수를 밖으로 꺼낼 수 있다.
// 이전버튼 클릭시 이전으로 이동하는 함수를 호출한다.
btn_previous.addEventListener('click',func_previous);
// 다음버튼 클릭시 다음으로 이동하는 함수를 호출한다.
btn_next.addEventListener('click',func_next);
} // end of window.onload = function()------------------------CSS
@charset "UTF-8";
div#container {
border: solid 0px green;
width: 70%;
margin: 5% auto; /**중앙 정렬한다.**/
}
div#slide {
border: solid 0px blue;
width: 900px; /* 이미지보다 크면 다음 이미지까지 표시되므로 slide 크기를 img 크기와 동일하게 설정해야 한다. */
/* width: 1200px; 을 해보면 이해가 갈 것이다. */
height: 300px; /* 이미지보다 크면 다음 이미지까지 표시되므로 slide 크기를 img 크기와 동일하게 설정해야 한다. */
overflow: hidden; /* overflow: hidden을 사용하여 width: 900px; 을 넘어서 보여지는 사진들을 안보이도록 만든다. */
}
div#images {
border: solid 0px red;
display: flex; /* 좌우 슬라이드를 위해 flex로 사진을 가로정렬한다. */
height: 300px; /* 이미지들의 height 는 화면상에 보여지는 장소인 위의 slide와 height 와 동일하게 설정한다. */
transition: transform 1s; /* 요소(엘리먼트)를 transform(변형) 시키는데 걸리는 시간(단위는 초) 0.5초 */
/* transform: translateX(900px); */ /* transform 은 요소(엘리먼트)를 변형시키는 것이다.
요소를 회전(rotate), 확대 또는 축소(scale), 기울이기(skew), 이동(translate) 효과를 부여할 수 있다.
이를 통해 CSS 시각적 서식 모델의 좌표 공간을 변경한다.
transform 이 지원되는 웹브라우저는 IE는 버전 10 이상부터 지원한다. */
}
div#images > img {
width: 900px; /* div#slide 크기와 동일하게 설정한다. */
height: 300px; /* div#slide 크기와 동일하게 설정한다. */
}
/* 버튼디자인 */
button {
width: 50px;
height: 50px;
background-color: #646464;
color: white;
font-size: 20pt;
border-radius: 50%;
}
button:active { /* 버튼을 클릭하는 동안 색을 바꾼다. */
background-color:#3e3e3e;
}
button:disabled { /* 버튼 속성이 disabled되면 색을 바꾼다. */
background-color: #cbcaca;
}정리
- 10_slide
-> slide_horizontality.html, slide_horizontality.js, slide_horizontality.css
