⁂ Java Script/: 연습 문제
[JS] 연습문제 : 이미지 스크롤 만들기
김갱환
2022. 8. 17. 10:38
1. 완성된 모습
Hint
- 이미지를 왼쪽으로 스크롤 함.
- 이미지는 3초 후에 스크롤을 시작함.
- 총 8개의 이미지를 스크롤 함.
- 각 이미지는 div로 개별적으로 묶어주며 이미지가 스크롤 될 배경도 <form>으로 영역지정을 해줌.
- 반복문으로 이미지 8장을 배치함, 배치할 때 left 값으로 적절하게 배치함.
- 스크롤시 이미지가 움직이는 것이 아니라 여백이 줄어듦으로 이미지가 움직이게끔 보이게 함.
- 이미지가 <form> 영역 밖으로 사라지면 다시 오른쪽으로 이동시킴(여백을 조정하여).
2. 완성 코드(폰트도 들어있고 수업하면서 시도해본 내용도 들어서 코드가 좀 난잡함)
눌러서 확인하세요
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>02_이미지스크롤.html</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hi+Melody&display=swap" rel="stylesheet">
<style>
#mydiv{
position: relative;
left: 100px;
top: 20px;
/* 8) */
--width: 800px;
width: 270px; /* 9) 영역 크기 줄이기 */
height: 100px;
/* 10) 배경색 */
--background-color: hotpink;
background-color: none; /* 11) 배경 없애기 */
overflow: hidden; /* 12) 영역 밖의 내용은 숨기기 */
}
</style>
<script>
// 1) 스크롤 하고자 하는 이미지를 전역변수에 저장
let ctnt=[]; // 배열 선언
ctnt[0]="<img src='../../images/001.png' width='85'>";
ctnt[1]="<img src='../../images/002.png' width='85'>";
ctnt[2]="<img src='../../images/003.png' width='85'>";
ctnt[3]="<img src='../../images/004.png' width='85'>";
ctnt[4]="<img src='../../images/005.png' width='85'>";
ctnt[5]="<img src='../../images/006.png' width='85'>";
ctnt[6]="<img src='../../images/007.png' width='85'>";
ctnt[7]="<img src='../../images/008.png' width='85'>";
// 2) 1)에서 준비한 이미지를 id=mydiv에 배치하기
function start() {
/*
document.write("<div id='area0' style='position: absolute; top:0; left:0'>")
document.write(ctnt[0]);
document.write("</div>");
document.write("<div id='area1' style='position: absolute; top:0; left:90px'>")
document.write(ctnt[1]);
document.write("</div>");
*/
// 문) 반복문을 활용해서 이미지 8장 배치하기
for(let i=0; i<ctnt.length; i++) {
document.write("<div id='area" + i + "' style='position: absolute; top:0; left:" + i*90 + "px'>");
document.write(ctnt[i]);
document.write("</div>");
}
// 3) 3초 후에 scroll 함수 1번 호출
setTimeout(scroll, 3000);
} // start end
// 4) 이미지 스크롤
function scroll() {
// alert("메롱");
// alert(document.getElementById("area0").style); // [object HTMLDivElement]
// alert(document.getElementById("area0").style); // [object CSSStyleDeclaration]
// alert(document.getElementById("area0").style.left); // 0px
// 5) id=area0의 스타일을 가져와서 왼쪽 여백값을 -10px만큼 줄이기
// let tmp=document.getElementById("area0").style;
// tmp.left = parseInt(tmp.left)-10 + "px";
// 내 풀이
/* for(let i=0; i<ctnt.length; i++) {
let tmp=document.getElementById("area"+i).style;
if(parseInt(tmp.left)>=-90){
tmp.left = parseInt(tmp.left) - 10 + "px";
} else {
tmp.left = (ctnt.length-1)*90 + "px"
}
} */
for(let i=0; i<ctnt.length; i++) {
let tmp=document.getElementById("area"+i).style;
tmp.left = parseInt(tmp.left) - 10 + "px";
if(parseInt(tmp.left)<=-90){
tmp.left = (ctnt.length-1)*90 + "px"
}
}
// 6) 0.5초 후 scroll함수 호출
timer=setTimeout(scroll, 200);
} // scroll end
// 13) 6)의 시간을 해제
var timer; // 전역변수
function killtime() {
clearTimeout(timer);
} // killtime end
</script>
</head>
<body onunload="killtime()"> <!-- 페이지 벗어났을 때 멈추기 -->
<h1 style="margin: auto; font-family: 'Hi Melody', cursive;">오늘의 포켓몬은 뭘까요!</h1>
<!-- 이미지가 스크롤 되는 위치 -->
<div id="mydiv">
<script> start(); </script>
</div>
</body>
</html>