setlnterval.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<script>
// 슬라이드 만들 수 있음, 이미지 전환 ★★
console.log(1);
setInterval(function() {
console.log('안녕');
}, 2000)
setTimeout(function() {
console.log('안녕');
}, 5000)
console.log(2);
</script>
</body>
</html>
fadeIn.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
*{margin: 0; padding: 0; box-sizing: border-box;}
body {
width: 100%;
height: 100vh;
}
@keyframes fadein {
0% {opacity: 0.4;}
100% {opacity: 1;}
}
.fadeImg {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* 중앙 배치 */
/* transition: 0.5s; 안됨 ★ */
animation: fadein 0.5s; /* 부드럽게 나타나게 ★ */
}
</style>
</head>
<body>
<div class="fadeImg"><img src="../img/img_lights1.jpg" alt=""></div>
<div class="fadeImg"><img src="../img/img_lights2.jpg" alt=""></div>
<div class="fadeImg"><img src="../img/img_lights3.jpg" alt=""></div>
<div class="fadeImg"><img src="../img/img_lights4.jpg" alt=""></div>
<script>
let imgDivs = document.querySelectorAll('.fadeImg');
// NodeList(4), 배열처럼 forEach문 사용가능
console.log(imgDivs);
let indexNum = 0; // 가장 먼저 보는 번호 0
let nextNum;
// (1) forEach
// imgDivs안에 있는 값 div의 스타일 display를 none으로 변경
imgDivs.forEach(img=>img.style.display = 'none');
// imgDivs.forEach(div=>div.style.display = 'none'); // 같음 ★
imgDivs[0].style.display = 'block';
setInterval(function () {
// (1) 다시 첫 이미지 나오지 않음
// nextNum = indexNum + 1;
// (2)
// nextNum = indexNum === 3? 0 : indexNum + 1; // 맞으면 0, 아니면 + 1 ★
// (3)
nextNum = (indexNum + 1) % 4; // 0, 1, 2, 3
imgDivs[indexNum].style.display = 'none'; // 0이 안보이고
imgDivs[nextNum].style.display = 'block'; // 1이 보임
indexNum = nextNum; // 1 = 0 → 다시 돌아가서 1 + 1 = 2 → 1이 안보이고 2가 보임
}, 3000)
// (2) for
// for (let i=0; i<imgDivs.length; i++) {
// imgDivs[i].style.display = 'none';
// // 이미지가 늘어나도 수정 안해줘도됨 ★
// }
// (3)
// ↓ 번거로움, 별로 💀
// imgDivs[0].style.display = 'none';
// imgDivs[1].style.display = 'none';
// imgDivs[2].style.display = 'none';
// imgDivs[3].style.display = 'none';
</script>
</body>
</html>
slideLeft.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
*{margin: 0; padding: 0; box-sizing: border-box;}
li {
list-style: none;
}
#divView {
width: 600px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
/* 나머지 안보이게 ↑ */
}
#divs {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: 0.5s;
}
.imgdiv {
position: absolute;
}
/* ↓ 자바스크립트, 반복문 사용하면 됨, 갯수에 영향 미치지 않음 */
/* .imgdiv:nth-child(1) {
left: 0;
}
.imgdiv:nth-child(2) {
left: 100%;
}
.imgdiv:nth-child(3) {
left: 200%;
}
.imgdiv:nth-child(4) {
left: 300%;
} */
/* (me) */
/* #clickImg {
width: 600px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
}
#clickImg > div {
width: 40px;
position: relative;
font-size: 10px;
}
#clickImg > div > img {
height: 40px;
}
.left {
position: absolute;
top: 0;
left: -47%;
color: #fff;
}
.right {
position: absolute;
top: -18%;
left: 42%;
color: #fff;
} */
.btn {
width: 60px;
height: 60px;
background: tomato;
color: #fff;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
line-height: 60px;
/* ↑ 중앙 배치 */
}
#prev {
margin-left: -250px;
}
#next {
margin-left: 250px;
}
#indi {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
padding: 10px;
}
#indi span {
display: inline-block;
width: 16px;
height: 16px;
background: rebeccapurple;
border-radius: 50%;
margin: 0 6px;
font-size: 0;
}
/* 05. 12 */
#indi span.on {
background: yellow;
}
</style>
</head>
<body>
<div id="divView">
<div id="divs">
<div class="imgdiv"><img src="../img/img_lights1.jpg" alt=""></div>
<div class="imgdiv"><img src="../img/img_lights2.jpg" alt=""></div>
<div class="imgdiv"><img src="../img/img_lights3.jpg" alt=""></div>
<div class="imgdiv"><img src="../img/img_lights4.jpg" alt=""></div>
<div class="imgdiv"><img src="../img/img_lights1.jpg" alt=""></div>
<div class="imgdiv"><img src="../img/img_lights2.jpg" alt=""></div>
<div class="imgdiv"><img src="../img/img_lights3.jpg" alt=""></div>
<div class="imgdiv"><img src="../img/img_lights4.jpg" alt=""></div>
</div>
<div id="prev" class="btn">prev</div>
<div id="next" class="btn">next</div>
<div id="indi"></div>
<!-- <span>0</span>
넣을걸 JS에서 넣어주기 -->
</div>
<!-- (me) -->
<!-- <div id="clickImg">
<div class="left"><img src="../img/visual_arrow_prev.png" alt="" onclick="moveDiv(divLeft)">왼쪽</div>
<div class="right"><img src="../img/visual_arrow_next.png" alt="" onclick="moveDiv(left)">오른쪽</div>
</div> -->
<script>
// (me)
// const left = document.querySelector('.left');
// const right = document.querySelector('.right');
const imgDivs = document.querySelectorAll('.imgdiv');
const next = document.querySelector('#next');
const prev = document.querySelector('#prev');
let divLeft = 0; // 변수 선언하기, 초기값
let current = 0;
// ↓ setInterval을 담을 함수
let timer;
const indiDiv = document.querySelector('#indi');
let indiStr = ""; // 빈문자 선언하기
// ●● 밑에 땡땡이
imgDivs.forEach((imgdiv, index) => {
imgdiv.style.left = 100 * index + '%'; // 결합연산자 더하기
// imgdiv.style.left = `${index*100}%`; // 위와 같음
// ↓ forEach 안에 index(0, 1, 2, 3,..), ● ● ● ● 땡땡이 만들어줌
indiStr = indiStr+ `<span>${index}</span>`
});
indiDiv.innerHTML = indiStr;
// 같음 ↑↓
// document.querySelector('#indi').innerHTML = indiStr;
// 05.12
let indi = document.querySelectorAll('#indi span');
indi[0].classList.add('on'); // 시작할 때 붙여놓겠다. yellow
console.log(indi); // span 8개 담긴 노드리스트
// ●● 땡땡이 누르면 해당 위치로 이동 (이벤트 연결)
indiDiv.addEventListener('click', function(e) {
let targetNum = Number(e.target.innerHTML);
// console.log(typeof targetNum); // 타입 string → 숫자로 바꾸기
moveDiv(targetNum);
})
// ●● 이전, 다음 버튼 이벤트 연결
prev.addEventListener('mouseenter', function() { // 올리면 정지
stopIt();
})
prev.addEventListener('mouseleave', function() { // 떼면 동작
startIt();
})
prev.addEventListener('click', function() {
// 현재의 이전 값을 구함 → 현재 1이면 0, 현재 2면 1, ...
let prevNum = current == 0 ? imgDivs.length-1 : current-1; // 같음) 3 : current-1;
// length 해놓으면 img 추가해도 지장없음
// ▼▼ 호출해야 움직임
moveDiv(prevNum);
})
next.addEventListener('mouseenter', function() { // 올리면 정지
stopIt();
})
next.addEventListener('mouseleave', function() { // 떼면 동작
startIt();
})
next.addEventListener('click', function() {
// 현재의 다음 값을 구함 → 현재 1이면 2, 현재 2면 3, ...
let nextNum = current == imgDivs.length-1 ? 0 : current+1;
// 다음 값으로 이동
// ▼▼ 호출해야 움직임
moveDiv(nextNum);
})
// ●● setInterval(함수, 시간)
// setInterval(function () {
// // 3초마다 이미지 전환
// // dom 요소 divs의 left값이 0%, -100%, -200%, -300%, 0%, ... 반복
// divLeft = divLeft === -3 ? 0 : divLeft - 1; // 삼항연산자 ★ or IF 사용
// // document.querySelector('#divs').style.left = `${divLeft * 100}%`; // 표현식 {}감싸기
// moveDiv(divLeft);
// }, 3000);
// ●● div를 이동시키는 함수
// (left) 몇번으로 이동할꺼냐 ?, `${-(left * 100)}%` 값에 곱하기 100 그리고 (-)
function moveDiv(left) {
document.querySelector('#divs').style.left = `${-(left * 100)}%`; // () 유무 상관없음
current = left; // 내가 몇번째 img 보고있는지 current가 담고있음, 내가 보고있는 아이를 나타내줌
console.log(current);
// 05.12
indi.forEach(ind => { // 바꼈던 색깔 다시 원래대로 되돌림
ind.classList.remove('on');
})
indi[current].classList.add('on'); // 땡땡이 색깔 바꿔줌
}
// ●● setInterval 실행 (자동 이미지 전환 실행 함수) setInterval 사용
function startIt() {
timer = setInterval(function() {
divLeft = current === imgDivs.length-1 ? 0 : divLeft + 1;
moveDiv(divLeft);
}, 3000);
}
// ●● setInterval 정지 (자동 이미지 전환 멈춤 함수) clearInterval 사용
function stopIt() {
clearInterval(timer);
}
// ▼ 함수 호출
startIt();
</script>
</body>
</html>
