dukDukz

2021.03.23 사진 슬라이드 _ js 본문

웹 개발/JAVASCRIPT

2021.03.23 사진 슬라이드 _ js

헤일리_HJ 2021. 3. 23. 20:53

1. 첫번째 방법        move_img.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>move_img</title>
    <style>
        * {
         margin: 0;
         padding: 0;
        }

        #wrap{
            width: 100%;
            height: 300px;
            
            
        }
        #img_box{
            width: 1920px;
            height: 500px;
            position: absolute;
            overflow: hidden;
        }
        ul,li{
            list-style: none;
        }

        #img_ul>li{
            float: left;
            display: inline-block;
        }

        .li_1>img{
            width: 1920px;
            height: 500px;
            float: left;
        }

    </style>
</head>
<body>
    <div id="wrap">
        <div id="img_box">
            <ul id="img_ul">
                <li class="li_1"><img src="./img/visual1.png" alt="이미지1"></li>
                <li class="li_2"><img src="./img/visual2.png" alt="이미지1"></li>
                <li class="li_3"><img src="./img/visual3.png" alt="이미지1"></li>
                
            </ul>
        </div>
    
    </div>

   
    <script type="text/javascript">
        function moveImg(){
            visual_ul = document.querySelector('#img_ul'); //ul가져옴
            li = document.querySelectorAll('#img_ul>li');

            visual_ul.appendChild(li[0]);
            console.log(visual_ul);
            
        }
        setInterval(moveImg, 3000);
        
        
    </script>
</body>
</html>

 

visual_ul.appendChild(li[0]);

이 부분을 추가해줬다.

 

li 를 보면 0번째 li가 계속 밑으로 오는게 반복하는 것을 알 수 있다.

 

 

+ 첫번째 방법 추가 설명

더보기

[Element, Element, Element]

    0          1             2

각각의 엘리먼트를 담고 있는 배열 값으로 반환이 된다.

 

--> li 전체를 (유사)배열 형태로 저장한다.

<!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;
      }

      #root {
         width: 100%;
         height: 300px;

      }

      #container {
         width: 1920px;
         height: 500px;
         position: absolute;
         overflow: hidden;
      }

      ul,
      li {
         list-style: none;
      }

      #img_ul>li {
         float: left;
         display: inline-block;
      }

      .li_1>img {
         width: 1920px;
         height: 500px;
         float: left;
      }
    </style>
</head>
<body>
    <div id="root">
        <div id="container">
            <ul id="banner" class="visual">
            <li><img src="./img/visual1.png"></li>
            <li><img src="./img/visual2.png"></li>
            <li><img src="./img/visual3.png"></li>
        </ul>
    </div>
        
    </div>

    <script type="text/javascript">
    function banner(){
        banner = document.querySelector('#banner');     // ul안에 있는 모든 것을 가져온다. ul 내용을 엘리먼트 데이터 타입으로 저장한 것
        li = document.querySelectorAll('#banner > li'); // li 전체를 배열로 반환받는다.
        /*
            [Element, Element, Element]
                0        1        2
            각각의 엘리먼트를 담고 있는 배열 값으로 반환이 된다.
        
        */

        banner.appendChild(li[0]);      // 맨 앞에 있는 li를 항상 밑으로 보낸다.
    }

    setInterval(banner,5000);
    /*
    setInterval([],[]);
                함수 int(시간)
    인자 값이 하나, 둘, 셋이 들어가는 경우.
    
    
    
    */
    </script>
</body>
</html>

 

 

2. 두번째 방법        ex.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;
      }

      #root {
         width: 100%;
         height: 300px;

      }

      .container {
         width: 1920px;
         height: 500px;
         position: absolute;
         overflow: hidden;
      }

      ul,
      li {
         list-style: none;
      }

      #img_ul>li {
         float: left;
         display: inline-block;
      }

      .li_1>img {
         width: 1920px;
         height: 500px;
         float: left;
      }
   </style>

</head>

<body>
   <div id="root">
      <div class="container">
         <ul class="visual_box">
            <li><img src="./img/visual1.png"></li>
            <li><img src="./img/visual2.png"></li>
            <li><img src="./img/visual3.png"></li>

         </ul>
      </div>
   </div>

   <script>
      function moving() {
         box = document.querySelector('.visual_box');
         li = document.querySelector('li');
         box.removeChild(li);
         box.appendChild(li);
      }

      setInterval(moving, 1000);



   </script>
</body>

</html>

 

 

 

 

 

참고 블로그

 

1.

appendChild(), insertBefore()

 

appendChild(), insertBefore()

appendChild() 자식 노드의 마지막에 노드가 삽입된다. insertBefore() insertBefore()는 appendChild()와 비슷하지만, 전달인자가 두 개라는 점이 다르다. 첫 번째 전달인자는 삽입하려는 노드고 두 번째 전달인

iamawebdeveloper.tistory.com

2.

removeChild(), replaceChild()

 

removeChild(), replaceChild()

removeChild() 문서 계층 구조에서 하나의 노드를 삭제한다. 주의할 점은 이 메서드는 삭제하려는 노드가 아니라 이 노드를 자식으로 가진 부모 노드에서 실행된다는 점이다. 따라서 메서드 전달인

iamawebdeveloper.tistory.com

 

'웹 개발 > JAVASCRIPT' 카테고리의 다른 글

2021.03.25 경일 배너 만들기 (애니메이션)  (0) 2021.03.25
2021.03.25 JS Document. 의 활용  (0) 2021.03.25
2021.03.24 JS에 대해  (0) 2021.03.24
To do list_ Array 배열 없이 요소 삭제하기  (4) 2021.03.23
2021.03.22 To do list  (0) 2021.03.22
'웹 개발/JAVASCRIPT' Related Articles more