jquery 코드를 vanilla 로 번역 좀 해주세요.

jquery 코드를 vanilla 로 번역 좀 해주세요.

QA

jquery 코드를 vanilla 로 번역 좀 해주세요.

본문

jQuery 로 작성된 롤링배너를 바닐라 스크립트로 변경하는 공부하고 있습니다.

아래 코드를 바닐라로 번역 좀 해주실 분 안계신가요??

 


            //첫번째 이미지를 마지막 끝에 복사(이동이 아니라 복사)해서 추가한다.
            $banner.append("<li>" + $banner.find("li:first").html() + "</li>");
            //뒤로 복사된 첫번재 이미지는 필요 없으니 삭제한다.
            $banner.find("li:first").remove();
            //다음 움직임을 위해서 배너 좌측의 위치값을 초기화 한다.
            $banner.css("left", 0);

이 질문에 댓글 쓰기 :

답변 3

제이쿼리를 써본 적이 없는 사람이라서. . .

아마도 아래와 유사한 형태가 아닐까요?

 


$banner.insertAdjacentHTML("beforeend", "<li>" + $banner.querySelectorAll("li")[0].innerHTML + "</li>");
$banner.querySelectorAll("li")[0].remove();
$banner.style.left = "0px";

 

$banner 의 가장 첫번째 li 의 내용물을 가장 마지막에 li 를 동적으로 생성한 후 그곳으로 옮기고

첫번째 li 는 삭제 후에 $banner 의 좌측 포지션을 0픽셀로 준다. 라는 설명대로라면 위 코드가 맞을 거에요.

 

저 같으면 첫줄을 아래처럼 했을 것 같네요. 나머지는 같고...

 


$banner.innerHTML += ("<li>" + $banner.querySelectorAll("li")[0].innerHTML + "</li>"); 

분명 되기는 하는데 조금 이상하게 작동하고 있습니다.
그런데 답변해 주신 부분이 아니고 다른 코드들 때문인 것 같아요.
조금 더 연구해 보고 알려 드리겠습니다..^^

정말 감사드립니다.

작동은 하는데 아래 코드가 이상하게 작동합니다.

주요 코드는 다음과 같습니다.

 


<div class="banner">
    <ul>
        <li><img src="roll1.jpg"></li>
        <li><img src="roll2.jpg"></li>
        <li><img src="roll3.jpg"></li>
    </ul>
</div>
....
...
<script>
    //사용할 배너
    var banner = document.querySelector('.banner ul');
    var bannerWidth  = window.innerWidth; // 그림 넓이 (윈도우 창 크기)
    var bannerLength = 3;//배너 이미지의 갯수
    var img = document.querySelectorAll('.banner img');
    for ( var i = 0; i < img.length; i++ ) {img[i].style.width = bannerWidth + "px";}
    banner.style.width = bannerWidth * bannerLength +"px";
    
    var rollingId = setInterval(function() { rollingStart(); }, 4000);//다음 이미지로 롤링 애니메이션 할 시간차
    
    function rollingStart() {
            bannerWidth  = window.innerWidth; // 창크기를 변경할 때를 대비해 윈도우창 크기 다시 계산
            for ( var i = 0; i < img.length; i++ ) {img[i].style.width = bannerWidth + "px";}
            banner.style.width = bannerWidth * bannerLength + "px";
            banner.style.transition = "transform 2s ease-in-out";
            banner.style.transform = "translateX(" + (-bannerWidth) + "px)"
            //첫번째 이미지를 마지막 끝에 복사(이동이 아니라 복사)해서 추가한다.
            banner.innerHTML += ("<li>" + banner.querySelectorAll("li")[0].innerHTML + "</li>"); 
            //뒤로 복사된 첫번재 이미지는 필요 없으니 삭제한다.
            banner.querySelectorAll("li")[0].remove();
            //다음 움직임을 위해서 배너 좌측의 위치값을 초기화 한다.
            banner.style.left = "0px";
            //이 과정을 반복하면서 계속 롤링하는 배너를 만들 수 있다.
        
    }
</script>

 

여기서 아래 부분이 한 번만 작동하고 더 작동하지 않는것 같아요.

혹시 왜 그런지 알 수 있을까요?..


            banner.style.transition = "transform 2s ease-in-out";
            banner.style.transform = "translateX(" + (-bannerWidth) + "px)"

 

참고로 전체 소스는 아래 링크에서 [소스보기]를 하시면 됩니다.

 

jQuery 로 구현한 배너 :  http://yogibbs.kr/banner/banner3.php

 

바닐라로 번역해 구현한 배너 : http://yogibbs.kr/banner/banner2.php

 

아~ 그리고 jQuery 실행에서도 이상한 것이 처음에는 4초 마다 잘 롤링이 되는데, 장시간 다른 탭들에 갔다 오거나 컴퓨터가 슬립모드 있다가 다시 화면 돌아오고 나면 거의 1초 마다 롤링이 됩니다.

이것도 왜 그런지는 모르겠는데 혹시 이것과 관련된 현상 아닐까도 의심해 봅니다.

 

답변을 작성하시기 전에 로그인 해주세요.
전체 2,660
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT