[jQuery] 방향키가 있는 이미지 슬라이드쇼
10 Nov 2021 -
2 minute read
방향키가 있는 이미지 슬라이드쇼 만들기
See the Pen 방향키가 있는 이미지 슬라이드 by Jinsol (@losuif) on CodePen.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slide Show</title>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div id="wrap">
<h1>슬라이드쇼 : 가로이동방식</h1>
<div id="slideShow">
<!-- 이미지 한개의 크기 (780*350) -->
<div id="shuttleFrame" class="flex-container">
<!-- >= 이미지 전체 개수의 폭 -->
<a href="#">
<img src="https://cdn.pixabay.com/photo/2021/08/26/01/40/cats-6574788_960_720.jpg" alt="이미지1" width="780" height="350">
<span>슬라이드쇼 이미지 1</span>
</a>
<a href="#">
<img src="https://media.istockphoto.com/photos/cute-cat-and-dog-portrait-picture-id1137572791?k=20&m=1137572791&s=612x612&w=0&h=luSGWH5TRQlQsxh4_g_XcO22FAj_8U_TV5jVyO6OzjI=" alt="이미지2" width="780" height="350">
<span>슬라이드쇼 이미지 2</span>
</a>
<a href="#">
<img src="https://media.istockphoto.com/photos/british-shorthair-and-golden-retriever-friendly-picture-id1159973303?k=20&m=1159973303&s=612x612&w=0&h=n8EiI12XBD2QtMa-zWc4DiXHDPSaGlC3ieOHItbbOPs=" alt="이미지3" width="780" height="350">
<span>슬라이드쇼 이미지 3</span>
</a>
</div>
<!-- div#shuttleFrame -->
<!-- 슬라이드쇼 방향키 시작 -->
<div id="arrowLeft" class="arrowMark"><</div>
<div id="arrowRight" class="arrowMark">></div>
<!-- 슬라이드쇼 방향키 끝 -->
</div>
<!-- div#slideShow -->
</div>
<!-- div#wrap -->
<script src="lib/jquery-3.6.0.min.js"></script>
<script src="script/script.js"></script>
</body>
</html>
CSS
- Reset CSS
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
* {
color: #222;
font-family: "Nanum Gothic", sans-serif;
text-decoration: none;
padding: 0;
margin: 0;
box-sizing: border-box;
}
a:link {
color: #333;
}
a:visited {
color: #333;
}
a:hover {
color: #444;
}
a:active {
color: #444;
}
img {
vertical-align: middle;
}
ul {
list-style: none;
}
.flex-container {
display: flex;
}
- style.css
@charset "UTF-8";
@import url(../style/style_Reset.css);
div#wrap {
width: 800px;
padding: 10px;
border: 1px solid #000;
margin: 20px auto;
}
#slideShow {
width: 780px;
height: 350px;
margin: 0 auto;
padding: 5px;
overflow: hidden;
position: relative;
}
#shuttleFrame {
width: 2370px;
}
#slideShow #shuttleFrame a {
position: relative;
}
#slideShow #shuttleFrame span {
font-size: 24px;
font-weight: bold;
color: #fff;
padding: 10px 30px;
border: 6px solid rgba(255, 255, 255, 0.8);
border-radius: 10px;
background-color: rgba(202, 202, 202, 0.6);
/* #slideShow #shuttleFrame a -> position: relative와 한쌍 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#shuttleFrame a {
position: relative;
}
/* 슬라이드쇼 방향키 시작 */
div.arrowMark {
color: rgba(221, 221, 221, 0.61);
font-size: 60px;
margin: 0 30px;
/* #slideShow -> position: relative와 한 쌍 */
position: absolute;
top: 50%;
transform: translateY(-50%);
user-select: none;
}
div.arrowMark:hover {
color: #e1e1e1;
cursor: pointer;
}
div.arrowMark:active {
color: #f9f9f9;
}
div#arrowRight {
right: 0;
}
/* 슬라이드쇼 방향키 끝 */
JavaScript
$(function () {
let autoSlide = setInterval(fnSlide, 5000);
// autoSlide : 전역변수
// 일정시간마다 반복
let chkCall = true;
// 정방향 슬라이드 함수
function fnSlide() {
chkCall = false;
/* 슬라이드 쇼 애니메이션 코드 시작 */
$("div#shuttleFrame").animate({
"margin-left": "-780px"
},
3000,
function () {
$("#shuttleFrame>a:nth-child(1)")
.insertAfter("#shuttleFrame>a:nth-child(3)");
$("#shuttleFrame").css({
"margin-left": "0"
});
chkCall = true;
}
);
/* 슬라이드 쇼 애니메이션 코드 끝 */
}
// 역방향 슬라이드 함수
function fnSlidePrev() {
chkCall = false;
// 셔틀프레임이 오른쪽으로 이동하는 애니메이션을 구현하기 위해 왼쪽 -780px에서 시작
// (콜백함수에서 만들어야 하는 내용을 미리 만들어둠 (단, 역방향이어야 함))
$("#shuttleFrame").css({"margin-left": "-780px"});
// 오른쪽 마지막에 있던 이미지가 왼쪽 첫번째에 위치하여 슬라이드 애니메이션을 준비
$("#shuttleFrame a:last-child")
.insertBefore("#shuttleFrame a:first-child");
// 셔틀프레임 오른쪽이동 애니메이션 시작
$("#shuttleFrame").animate(
{"margin-left": "0"},
3000,
function(){
chkCall = true;
}
);
}
// 마우스를 올리면(mouseover) 슬라이드 멈추기
$("div#slide").mouseover(function () {
// setInterval 멈추기
// 1. setInterval을 변수로 지정하여 대입
// => let autoSlide = setInterval(...);
// 2. 지정된 변수를 clearInterval(변수);로 적용
clearInterval(autoSlide);
});
$("div#slide").mouseout(function () {
// setInterval 재실행
autoSlide = setInterval(fnSlide, 5000);
});
// 오른쪽 방향키
$("#arrowRight").click(function(){
if (chkCall) {
fnSlide();
}
});
// 왼쪽 방향키
$("#arrowLeft").click(function(){
if (chkCall) {
fnSlidePrev();
}
});
});