9. slide
1. 기본 슬라이드
1.1. fadeInOut
1.1.1. 메서드 활용
예제
리소스 이미지
http://qwerew.cafe24.com/images/1.jpg
http://qwerew.cafe24.com/images/2.jpg
http://qwerew.cafe24.com/images/3.jpg
http://qwerew.cafe24.com/images/4.jpg
http://qwerew.cafe24.com/images/5.jpg
http://qwerew.cafe24.com/images/6.jpg
http://qwerew.cafe24.com/images/7.jpg
http://qwerew.cafe24.com/images/8.jpg
http://qwerew.cafe24.com/images/9.jpg
http://qwerew.cafe24.com/images/10.jpg
HTML
<body>
<div id="content">
<h3>Simple Crossfade Waterfalls Slideshow</h3>
<ul id="crossfade">
<li>
<a href="#"><img src="http://qwerew.cafe24.com/images/1.jpg" alt="" /></a>
<p>1번</p>
</li>
<li>
<a href="#"><img src="http://qwerew.cafe24.com/images/2.jpg" alt="" /></a>
<p>2번</p>
</li>
<li>
<a href="#"><img src="http://qwerew.cafe24.com/images/3.jpg" alt="" /></a>
<p>3번</p>
</li>
</ul>
</div>
</body>
CSS
#crossfade {
position: relative;
margin: auto;
padding: 0;
list-style-type: none;
width: 600px;
height: 400px;
overflow: hidden;
}
#crossfade li {
position: absolute;
width: 600px;
height: 400px;
}
#crossfade p {
position: absolute;
bottom: 0;
padding: 20px;
color: #fff;
background: #000;
background-color: rgba(0, 0, 0, 0.6);
margin: 0;
left: 0;
right: 0;
}
JS
방법1
$(() => {
$('#crossfade li').hide().filter(':first').show();
setInterval(slideshow, 3000);
function slideshow() {
$('#crossfade li:first').fadeOut('slow').next().fadeIn('slow').end().appendTo('#crossfade');
}
});
방법2
$(() => {
let idx = 0;
$('#crossfade li').hide();
$('#crossfade li').eq(0).show();
setInterval(slideshow, 3000);
function slideshow() {
$('#crossfade li').eq(idx).fadeOut('slow');
idx++;
if (idx > $('#crossfade li').length - 1) {
idx = 0;
}
$('#crossfade li').eq(idx).fadeIn('slow');
}
});
1.1.2. 클래스 활용
HTML
<body>
<div id="content">
<h3>Simple Crossfade Waterfalls Slideshow</h3>
<ul id="crossfade">
<li>
<a href="#"><img src="http://qwerew.cafe24.com/images/1.jpg" alt="" /></a>
<p>1번</p>
</li>
<li>
<a href="#"><img src="http://qwerew.cafe24.com/images/2.jpg" alt="" /></a>
<p>2번</p>
</li>
<li>
<a href="#"><img src="http://qwerew.cafe24.com/images/3.jpg" alt="" /></a>
<p>3번</p>
</li>
</ul>
</div>
</body>
CSS
#crossfade {
position: relative;
margin: auto;
padding: 0;
list-style-type: none;
width: 600px;
height: 400px;
overflow: hidden;
}
#crossfade li {
position: absolute;
width: 600px;
height: 400px;
opacity: 0;
transition: opacity 0.5s;
}
#crossfade p {
position: absolute;
bottom: 0;
padding: 20px;
color: #fff;
background: #000;
background-color: rgba(0, 0, 0, 0.6);
margin: 0;
left: 0;
right: 0;
}
JS
$(() => {
$('#crossfade li').hide().filter(':first').show();
setInterval(slideshow, 3000);
function slideshow() {
$('#crossfade li:first').fadeOut('slow').next().fadeIn('slow').end().appendTo('#crossfade');
}
});
1.2. 이동
HTML
<div id="content">
<h3>Slideshow</h3>
<ul id="crossfade">
<li>
<a href="#"><img src="http://qwerew.cafe24.com/images/1.jpg" alt="" /></a>
<p>1번</p>
</li>
<li>
<a href="#"><img src="http://qwerew.cafe24.com/images/2.jpg" alt="" /></a>
<p>2번</p>
</li>
<li>
<a href="#"><img src="http://qwerew.cafe24.com/images/3.jpg" alt="" /></a>
<p>3번</p>
</li>
</ul>
</div>
CSS
#crossfade {
position: relative;
margin: auto;
padding: 0;
list-style-type: none;
width: 600px;
height: 400px;
overflow: hidden;
}
#crossfade li {
position: absolute;
width: 600px;
height: 400px;
}
#crossfade p {
position: absolute;
bottom: 0;
padding: 20px;
color: #fff;
background: #000;
background-color: rgba(0, 0, 0, 0.6);
margin: 0;
left: 0;
right: 0;
}
JQurey1
const slide = $('#crossfade li');
// 정렬
slide.each((i, o) => {
$(o).css('left', i * 100 + '%');
});
let idx = 0;
// 무한루프를 위한 setInterval
setInterval(() => {
slide
.eq(idx)
.stop()
.animate({ left: -100 + '%' }, 1000, function () {
$(this).css('left', (slide.length - 1) * 100 + '%');
});
idx++;
if (idx > slide.length - 1) {
idx = 0;
}
slide
.eq(idx)
.stop()
.animate({ left: 0 + '%' }, 1000);
}, 3000); // 3초마다 반복
JQurey2
const slide = $('#crossfade li');
let current = 0;
// 정렬
slide.each((i, o) => {
$(o).css('left', i * 100 + '%');
});
setInterval(function () {
var prev = slide.eq(current);
move(prev, 0, '-100%');
current++;
if (current == slide.length) {
current = 0;
}
var next = slide.eq(current);
move(next, '100%', '0%');
}, 3000);
function move(tg, start, end) {
tg.css('left', start).stop().animate({ left: end }, 1000);
}
코드
HTML
<div class="slide_wrap">
<div class="brand_visual">
<ul>
<li class="visual_0"><a href="#">배너이미지1</a></li>
<li class="visual_1"><a href="#">배너이미지2</a></li>
<li class="visual_2"><a href="#">배너이미지3</a></li>
</ul>
</div>
<div class="btns">
<img src="img/left.png" class="prev" width="30" height="50" alt="" />
<img src="img/right.png" class="next" width="30" height="50" alt="" />
</div>
<ul class="buttons">
<li class="on"><a href="#">배너1</a></li>
<li><a href="#">배너2</a></li>
<li><a href="#">배너3</a></li>
</ul>
</div>
CSS
/* common */
html {
width: 100%;
height: 100%;
overflow-y: scroll;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0px;
padding: 0px;
font: inherit;
vertical-align: baseline;
}
body {
font-size: 12px;
font-family: Dotum, Arial;
color: #74767a;
line-height: 120%;
}
a,
a:link,
a:visited {
color: #74767a;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
table,
fieldset,
th,
td,
img {
border: none;
}
img,
input,
select {
vertical-align: middle;
}
.slide_wrap{position:relative;}
.brand_visual ul {
overflow: hidden;
position: relative;
width: 100%;
height: clamp(50vh,500px,20vh);
}
.brand_visual ul li {
position: absolute;
width: 100%;
height: 100%;
}
/* 글씨 제거 */
.brand_visual ul li a {
display: block;
text-indent: -9999px;
}
/* visual_0, visual_1, visual_2 위치정렬 */
.brand_visual .visual_0 {
left: 0;
background: url(img/0.png) 50% 0 no-repeat;
}
.brand_visual .visual_1 {
left: 100%;
background: url(img/1.png) 50% 0 no-repeat;
}
.brand_visual .visual_2 {
left: 200%;
background: url(img/2.png) 50% 0 no-repeat;
}
/* 화살표 */
.btns {
position: relative;
top: -250px;
width: 100%;
}
.btns .prev {
position: absolute;
left: 100px;
}
.btns .next {
position: absolute;
right: 100px;
}
/* 버튼 위치 지정 */
.buttons {
display: flex;
position: absolute;
left: 50%;
top: -135px;
gap:10px;
transform:translateX(-50%);
}
.buttons li {
background: url(img/btnVisual.png) 0 -16px no-repeat;
width: 14px;
height: 15px;
overflow: hidden;
cursor: pointer;
}
/* 글씨 제거 */
.buttons li a {
display: block;
text-indent: -9999px;
}
/* 활성화된 버튼 */
.buttons li.on {
background-position: 0 0;
}
JQ
$(() => {
const visual = $('.brand_visual>ul>li');
const button = $('.buttons>li');
const leftBtn = $('.btns .prev');
const rightBtn = $('.btns .next');
let setIntervalId;
const counter = $('.counter');
let current = 0;
function timer() {
setIntervalId = setInterval(function () {
changeSlide((current + 1) % visual.length); // 0%3=0/1%3=1/2%3=2/3%3=0
}, 3000);
}
function move(tg, start, end) {
tg.css('left', start).stop().animate({ left: end }, { duration: 500, ease: 'easeOutCubic' });
}
function cnt(num) {
counter.html(`${num + 1}`);
}
button.on('click', function () {
const i = $(this).index();
changeSlide(i);
});
function changeSlide(i, direction = 'right') {
if (current == i) return;
const currentEl = visual.eq(current);
const nextEl = visual.eq(i);
if (direction === 'right') {
move(currentEl, 0, '-100%');
move(nextEl, '100%', 0);
} else {
move(currentEl, 0, '100%');
move(nextEl, '-100%', 0);
}
button.eq(current).removeClass('on');
button.eq(i).addClass('on');
cnt(i);
current = i;
}
$('.slide_wrap').on({
mouseover: function () {
clearInterval(setIntervalId);
},
mouseout: timer,
});
rightBtn.click(function () {
changeSlide((current + 1) % visual.length);
return false;
});
leftBtn.click(function () {
changeSlide((current - 1 + visual.length) % visual.length, 'left');
return false;
});
timer(); // timer를 마지막에 호출하여 초기 슬라이드 쇼를 시작
});
JS
const visual = document.querySelectorAll('#brandVisual>ul>li');
const button = document.querySelectorAll('#buttonList>li');
const leftBtn = document.querySelector('.btnImg .prev');
const rightBtn = document.querySelector('.btnImg .next');
let current = 0;
let setIntervalId;
let isMove = false;
// 슬라이드 이동
function moveSlide(prevIndex, nextIndex) {
if (isMove) return;
isMove = true;
move(visual[prevIndex], 0, '-100%');
button[prevIndex].classList.remove('on');
move(visual[nextIndex], '100%', 0);
button[nextIndex].classList.add('on');
current = nextIndex;
}
// 애니메이션
function move(tg, start, end) {
let keyframes = [{ left: start }, { left: end }];
let options = { duration: 1000, fill: 'forwards' };
let animation = tg.animate(keyframes, options);
animation.onfinish = () => {
isMove = false;
};
}
// 타이머
function timer() {
setIntervalId = setInterval(() => {
let nextIndex = (current + 1) % visual.length;
moveSlide(current, nextIndex);
}, 3000);
}
setTimeout(timer, 1000);
// 이벤트 리스너들
document.querySelector('#wrap').addEventListener('mouseover', () => clearInterval(setIntervalId));
document.querySelector('#wrap').addEventListener('mouseout', timer);
button.forEach((btn, i) => {
btn.addEventListener('click', () => moveSlide(current, i));
});
rightBtn.addEventListener('click', (e) => {
e.preventDefault();
let nextIndex = (current + 1) % visual.length;
moveSlide(current, nextIndex);
});
leftBtn.addEventListener('click', (e) => {
e.preventDefault();
let nextIndex = (current - 1 + visual.length) % visual.length;
moveSlide(current, nextIndex);
});