[JavaScript] 이미지 슬라이더 구현
2022. 3. 12.ㆍ공부/JavaScript
728x90
1. HTML 작성
<body>
<div class="img">
<!-- img 폴더에 img0.jpg, img1.jpg, img2.jpg 파일을 생성 -->
<img src="img/img0.jpg" width="400px" height="auto" id="pic">
<!-- a 태그 클릭 시 함수 실행할 수 있도록 작성 -->
<a href="#" class="prev" onclick="return prev()">◀</a>
<a href="#" class="next" onclick="return next()">▶</a>
</img>
</div>
</body>
</html>
2. CSS 작성
<style>
* {
magrin: 0 auto;
box-sizing: border-box;
text-decoration: none; /* a태그에 밑줄 삭제 */
}
.img {
display: flex;
justify-content: center; /* 가로 중앙 정렬 */
}
#pic {
position:relative;
height: 500px;
width: auto;
margin: 40px;
border-radius: 5%; /* 사진 테두리에 r값 삽입 */
}
.prev {
position:absolute;
color: white;
font-size: 50px;
top: 250px;
left:30%;
transform: translateY(50%);
opacity: 50%;
}
.next {
position:absolute;
color: white;
font-size: 50px;
top: 250px;
right:30%;
transform: translateY(50%);
opacity: 50%;
}
a:visited {
color:white;
opacity: 50%;
}
</style>
3. JavaScript 작성
- 이미지 슬라이딩을 위한 function 작성 : 변수 num을 선언한 뒤, 조건문을 사용하여 변수값을 변경하였다. 변경한 변수값은 document.getElementById로 불러온 요소의 이미지 주소(파일명)에 사용되었다.
- 파일명이 img0, img1, img2 이므로 존재하지 않는 파일명이 생성되는 것에 대응하기 위한 분기 처리를 하였다. 변수값이 3이될 경우 0, 변수값이 0보다 작아질 경우 2로 작성하여 loop될 수 있게 하였다.
- 함수 안에 return false;를 선언하여 a태그의 링크 기능인 href의 실행을 막았다.
var num = 0;
function next() {
num ++
if(num === 3) {
num = 0;
}
document.getElementById("pic").src="img/img" + num + ".jpg";
return false;
}
function prev() {
num --
if(num === -1) {
num = 2;
}
document.getElementById("pic").src="img/img" + num + ".jpg";
return false;
}'공부 > JavaScript' 카테고리의 다른 글
| [JavaScript] 이벤트 핸들러 이용한 아코디언 메뉴 구현 (jQuery) (0) | 2022.03.14 |
|---|---|
| [JavaScript] <script> 태그의 위치 (0) | 2022.03.12 |
| [JavaScript] DOM Elements 조작 (0) | 2022.03.10 |
| [JavaScript] DOM (문서 객체 모델 : Document Object Model) (0) | 2022.03.08 |
| [JavaScript] Hoisting (0) | 2022.03.08 |