노력이 좋아서
<step37>'js_동기 비동기'
zoaseo
2022. 5. 11. 10:36
1) 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;
top: 0;
}
</style>
</head>
<body>
<div id="divView">
<div id="divs">
<div class="imgdiv"><img src="../과제/img/story_img01.jpg" alt=""></div>
<div class="imgdiv"><img src="../과제/img/story_img02.jpg" alt=""></div>
<div class="imgdiv"><img src="../과제/img/story_img03.jpg" alt=""></div>
<div class="imgdiv"><img src="../과제/img/story_img04.jpg" alt=""></div>
</div>
</div>
<script>
const imgDivs = document.querySelectorAll('.imgdiv');
let divLeft = 0;
imgDivs.forEach((imgdiv,index) => {
imgdiv.style.left = `${index*100}%`;
});
// setInterval(함수,시간)
setInterval(function(){
//3초마다 이미지 전환
//dom요소 divs의 left값이 0%, -100%, -200%, -300%, 0, -100%...
divLeft = divLeft === -3? 0 : divLeft - 1; //삼항연산자 사용
document.querySelector('#divs').style.left = `${divLeft * 100}%`;
},3000)
</script>
</body>
</html>2) slideLeft_2.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;
top: 0;
}
span {
position: absolute;
color: #fff;
font-size: 50px;
}
.le {
top: 50%;
transform: translateY(-50%);
left: 0;
}
.ri {
top: 50%;
transform: translateY(-50%);
right: 0;
}
</style>
</head>
<body>
<div id="divView">
<div id="divs">
<div class="imgdiv"><img src="../과제/img/story_img01.jpg" alt=""></div>
<div class="imgdiv"><img src="../과제/img/story_img02.jpg" alt=""></div>
<div class="imgdiv"><img src="../과제/img/story_img03.jpg" alt=""></div>
<div class="imgdiv"><img src="../과제/img/story_img04.jpg" alt=""></div>
</div>
<span class="le" >o</span>
<span class="ri" >o</span>
</div>
<script>
const imgDivs = document.querySelectorAll('.imgdiv');
let divLeft = 0;
imgDivs.forEach((imgdiv,index) => {
imgdiv.style.left = `${index*100}%`;
});
// setInterval(함수,시간)
setInterval(function(){
//3초마다 이미지 전환
//dom요소 divs의 left값이 0%, -100%, -200%, -300%, 0, -100%...
divLeft = divLeft === -3? 0 : divLeft - 1; //삼항연산자 사용
moveDiv(divLeft);
},3000)
function moveDiv(left){
document.querySelector('#divs').style.left = `${left * 100}%`;
document.querySelector('.ri').addEventListener('click', function(){
document.querySelector('#divs').style.left = `${(left-1) * 100}%`;
});
document.querySelector('.le').addEventListener('click', function(){
document.querySelector('#divs').style.left = `${(left+1) * 100}%`;
});
}
</script>
</body>
</html>3) slideLeft_2_teach.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;
top: 0;
}
.le {
top: 50%;
transform: translateY(-50%);
left: 0;
}
.ri {
top: 50%;
transform: translateY(-50%);
right: 0;
}
.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: 10px;
/* background: lightblue; */
width: 100%;
text-align: center;
padding: 10px;
}
#indi span {
display: inline-block;
width: 10px;
height: 10px;
background: tomato;
border-radius: 50%;
margin: 0 3px;
font-size: 0;
}
#indi span.on {
background: #000;
}
</style>
</head>
<body>
<div id="divView">
<div id="divs">
<div class="imgdiv"><img src="../과제/img/story_img01.jpg" alt=""></div>
<div class="imgdiv"><img src="../과제/img/story_img02.jpg" alt=""></div>
<div class="imgdiv"><img src="../과제/img/story_img03.jpg" alt=""></div>
<div class="imgdiv"><img src="../과제/img/story_img04.jpg" alt=""></div>
</div>
<div id="prev" class="btn">이전</div>
<div id="next" class="btn">다음</div>
<div id="indi"></div>
</div>
<script>
const imgDivs = document.querySelectorAll('.imgdiv'); //노드리스트 유사배열
const next = document.querySelector('#next');
const prev = document.querySelector('#prev');
const indiDiv = document.querySelector('#indi');
let divLeft = 0;
let current;
let indiStr = "";
//setInterval을 담을 변수
let timer;
imgDivs.forEach((imgdiv,index) => {
imgdiv.style.left = `${index*100}%`;
indiStr = indiStr + `<span>${index}</span>`
});
indiDiv.innerHTML = indiStr;
let indi = document.querySelectorAll('#indi span');
indi[0].classList.add('on');
console.log(indi);
// 인디케이터 이벤트 연결
indiDiv.addEventListener('click',function(e){
let targetNum = e.target.innerHTML;
moveDiv(targetNum);
})
// 이전, 다음 버튼 이벤트 연결
prev.addEventListener('mouseenter',function(){
stopIt();
})
prev.addEventListener('mouseleave',function(){
startIt();
})
prev.addEventListener('click', function(){
//현재의 이전값을 구함
let prevNum = current == 0? imgDivs.length-1 : current - 1;
moveDiv(prevNum);
})
next.addEventListener('mouseenter',function(){
stopIt();
})
next.addEventListener('mouseleave',function(){
startIt();
})
next.addEventListener('click', function(){
//현재의 다음값을 구함
let nextNum = current == imgDivs.length-1 ? 0 : current + 1;
//다음값으로 이동
moveDiv(nextNum);
})
//div를 이동시키는 함수
function moveDiv(left){
document.querySelector('#divs').style.left = `${-(left * 100)}%`;
current = left;
indi.forEach(ind =>ind.classList.remove('on'));
indi[current].classList.add('on');
}
//자동이미지 전환 실행함수(setInterval)
function startIt(){
timer = setInterval(function(){
//3초마다 이미지 전환
//dom요소 divs의 left값이 0%, -100%, -200%, -300%, 0, -100%...
divLeft = current === imgDivs.length-1 ? 0 : divLeft + 1; //삼항연산자 사용
moveDiv(divLeft);
},3000)
}
//자동이미지 전환 멈춤함수(clearInterval)
function stopIt(){
clearInterval(timer);
}
startIt();
</script>
</body>
</html>