제이쿼리 ( JQuery ) 예제

이동 순환 - setTimeout( )

 

코드펜  https://codepen.io/gamza/pen/GmYLgV

 

▣ 구상

  - 컨텐츠가 좌측으로 계속해서 이동하는 슬라이드 애니메이션

  - 컨텐츠가 뷰포트를 한방향으로 순환하며 반복

 

 

▣ 조건

   컨텐츠의 좌측이동

 ➋  순환

 

 

▣ 준비

 · 컨텐츠에 들어갈 이미지 2장 ( 200px * 200px )

 

 

 

◆ 레이아웃 ( html, css )

 1.  viewport 가 될 div.container 를 추가합니다. 

 2.  viewport 내부에 이미지( <img> ) 를 자식요소로 가진 컨텐츠( div.content ) 2개 추가

 3.  viewport 의 크기를 컨텐츠 1개의 크기에 맞춥니다.

 4.  컨텐츠를 뷰포트의 동일 선상에 위치시키기 위해 float : left 시키고

 5.  viewport 의 범위를 초과한 컨텐츠가 흘러내리지 않도록 컨텐츠에 직계 부모요소를 추가하여 

      두 컨텐츠의 넓이를 합친 width값을 적용합니다.

 

● html 

<body>

    <div class="container">
        <div class="content_box"> 
            <div class="content">
                <img src="이미지1주소" alt="이미지1" />
            </div>
            <div class="content">
                <img src="이미지2주소" alt="이미지2" />
            </div>
        </div>
    </div>
    
</body>

● css

.container{
    overflow:hidden;
    width:200px;height:200px;
    margin:100px auto;
    border:3px dotted salmon;
}
.content_box{
    height:100%;
    width:200%;
}
.content{
    float:left;
    width:50%;
    height:100%;
    box-sizing:border-box;
}

 

 

◆ 기능( jquery )

 1.  첫째 컨텐츠를 좌측으로 이동시킵니다.

 2.  애니메이션을 마친 후 "첫째 컨텐츠" 를 뒤로 보냅니다.

      ( 자연히 "둘째 컨텐츠" 는 "첫째 컨텐츠" 가 됩니다. )

  3.  1,2 번을 순회시킵니다.

 
● javascript
        $(function(){    
            var $move_width = parseInt( $('.content').css('width') );   // 이동할 수치 계산  
            var $content_box = $('.content_box');                       // 컨텐츠 박스 변수저장
            
            // 루프 (순환)
            function ani_1(){
                animation()                         
                setTimeout( ani_2, 1000 + 10 );     // 1000 + 10( 여유 ) 초 뒤, function ani_2() 로 이동 
            };                                      
            function ani_2(){
                animation()
                setTimeout( ani_1, 1000 + 10 );     // 1000 + 10( 여유 ) 초 뒤, function ani_1() 로 이동
            };
            ani_1();                                // function ani_1() 로 루프 start 
             
            // 로직
            function animation(){
                $content_box.children().first().stop()
                .animate({ marginLeft : - $move_width }, 1000, "linear", function (){
                    $(this).appendTo( $(this).parent() ).css({ marginLeft : 0});
                });     
            }
        });

댓글

댓글 본문
  1. gamza
    어느 부분이 막히는지 말씀을 해주셔야 답을 드릴수가 있습니다.
    대화보기
    • 슈니
      ㅠㅠ3장으로 늘리고싶은데 어떻게 해야하나유
    버전 관리
    gamza
    현재 버전
    선택 버전
    graphittie 자세히 보기