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초 마다 롤링이 됩니다.
이것도 왜 그런지는 모르겠는데 혹시 이것과 관련된 현상 아닐까도 의심해 봅니다.
해결했습니다.
위 transition 으로 이동을 완료하기 전에 아래쪽 그림변경이 일어나서 그랬네요.
setTimeout을 주어서 이동완료후 변경되게 하니 되네요.
감사합니다.
