javascript 이미지 겹침현상 채택완료

</p>

<p>var originalID, cloneID; //인터벌 포인터</p>

<p>    window.addEventListener('DOMContentLoaded', function(){</p>

<p> </p>

<p>        //롤링 배너 복제본 생성</p>

<p>        let roller = document.querySelector('.roller');</p>

<p>        roller.id = 'roller1';</p>

<p> </p>

<p>        let clone = roller.cloneNode(true);</p>

<p>        clone.id = 'roller2';</p>

<p>        document.querySelector('.wrap').appendChild(clone); //부착</p>

<p> </p>

<p>        //원본, 복제본 배너 위치 지정</p>

<p>        document.querySelector('#roller1').style.left = '0px';</p>

<p>        document.querySelector('#roller2').style.left = document.querySelector('.roller ul').offsetWidth+'px';</p>

<p> </p>

<p>        //클래스 할당</p>

<p>        roller.classList.add('original');</p>

<p>        clone.classList.add('clone');</p>

<p> </p>

<p>        //인터벌 메서드로 애니메이션 생성</p>

<p>        let rollerWidth = document.querySelector('.roller ul').offsetWidth;//회전 배너 너비값</p>

<p>        let betweenDistance = 1;//이동 크기 - 정수여야 함</p>

<p>        originalID = window.setInterval(betweenRollCallback, parseInt(1000/100), betweenDistance, document.querySelector('#roller1'));</p>

<p>        cloneID = window.setInterval(betweenRollCallback, parseInt(1000/100), betweenDistance, document.querySelector('#roller2'));</p>

<p> </p>

<p>        //인터벌 애니메이션 함수(공용)</p>

<p>        function betweenRollCallback(d, roller){</p>

<p>            let left = parseInt(roller.style.left);</p>

<p>            roller.style.left = (left - d)+'px';//이동</p>

<p>            //조건부 위치 리셋</p>

<p>            if(rollerWidth + (left - d) <= 0){</p>

<p>                roller.style.left = rollerWidth+'px';</p>

<p>            }</p>

<p>        }      </p>

<p>    });</p>

<p>