김갱환
맨땅에 코딩
김갱환
전체 방문자
오늘
어제
  • 분류 전체보기 (239)
    • ⁂ 맨땅에 코딩 (11)
      • : Story (3)
      • : MiniProject 'MyWeb' (1)
      • : Final Project (5)
      • : Josa-Moa 한국어 조사 처리 프로젝트 (1)
    • —————Frontend——————————————.. (0)
    • ⁂ HTML (10)
      • : 기본 익히기 (10)
    • ⁂ CSS (15)
      • : 기본 익히기 (15)
    • ⁂ Java Script (32)
      • : 기본 익히기 (28)
      • : 자바스크립트 라이브러리 (1)
      • : 연습 문제 (3)
    • ⁂ jQuery (11)
      • : 기본 익히기 (11)
    • ⁂ Bootstrap (3)
      • : 기본 익히기 (3)
    • ⁂ TailWind CSS (1)
    • ⁂ AJAX (5)
      • : 기본 익히기 (5)
    • ⁂ Vue.js (3)
      • : 기본 익히기 (3)
    • —————DB : Data Base————————.. (0)
    • ⁂ Oracle DB (27)
      • : 기본 익히기 (24)
      • : 연습 문제 (3)
    • ⁂ MyBatis Framework (15)
      • : 기본 익히기 (15)
    • —————Backend———————————————.. (0)
    • ⁂ Java (62)
      • : 기본 익히기 (42)
      • : JDBC - Java DataBase Conn.. (4)
      • : Crawling (2)
      • : 독학으로 공부하기(과거) (11)
      • : 연습문제 (3)
    • ——————Web————————————————— (0)
    • ⁂ JSP (28)
      • : 기본 익히기 (28)
    • ⁂ Spring FrameWork (15)
      • : Legacy Project (1)
      • : 기본 익히기(Boot 기반) (14)
    • ——————————————————————— (0)
    • ⁂ Error Note (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 연산자 #기본연산자 #코딩 #자바 #독학 #자바공부 #자바연산자
  • 코딩공부 #자바공부
  • 객체지향프로그래밍
  • 비트연산자 #코딩공부 #자바공부 #코딩 #자바 #프로그래밍 #개발자
  • 백앤드
  • 개발자
  • ErrorPage
  • 코딩 #코딩공부 #상수 #리터럴 #형변환 #개발자 #자바 #자바공부 #자바독학
  • 코딩
  • 코딩공부
  • 코딩 #코딩공부 #프론트앤드 #백앤드 #풀스택개발자
  • 자바공부
  • HTML공부
  • 풀스택
  • 코딩공부 #코딩 #자바 #자바독학 #자바공부 #개발자 #프론트앤드 #백앤드 #풀스택
  • http에러메세지
  • web.xml수정
  • 프론트앤드
  • httperror
  • 자바

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
김갱환

맨땅에 코딩

⁂ 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>
저작자표시 비영리 동일조건 (새창열림)

'⁂ Java Script > : 연습 문제' 카테고리의 다른 글

[JS] 아날로그 시계 만들기(고장나버려써)  (0) 2022.09.27
[JS] 날짜 데이터 자동 생성하기  (0) 2022.09.27
    '⁂ Java Script/: 연습 문제' 카테고리의 다른 글
    • [JS] 아날로그 시계 만들기(고장나버려써)
    • [JS] 날짜 데이터 자동 생성하기
    김갱환
    김갱환
    코딩의 코자도 모르는 이의 공부 기록장

    티스토리툴바