jquery 코드를 vanilla 로 번역 좀 해주세요. 채택완료

</p>

<p><div class="banner">

    <ul>

        <li><img src="roll1.jpg"></li>

        <li><img src="roll2.jpg"></li>

        <li><img src="roll3.jpg"></li>

    </ul>

</div></p>

<p>....</p>

<p>...</p>

<p><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";</p>

<p>            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>

</p>

<p>            banner.style.transition = "transform 2s ease-in-out";

            banner.style.transform = "translateX(" + (-bannerWidth) + "px)"