javascript 이미지 겹침현상
본문
var originalID, cloneID; //인터벌 포인터
window.addEventListener('DOMContentLoaded', function(){
//롤링 배너 복제본 생성
let roller = document.querySelector('.roller');
roller.id = 'roller1';
let clone = roller.cloneNode(true);
clone.id = 'roller2';
document.querySelector('.wrap').appendChild(clone); //부착
//원본, 복제본 배너 위치 지정
document.querySelector('#roller1').style.left = '0px';
document.querySelector('#roller2').style.left = document.querySelector('.roller ul').offsetWidth+'px';
//클래스 할당
roller.classList.add('original');
clone.classList.add('clone');
//인터벌 메서드로 애니메이션 생성
let rollerWidth = document.querySelector('.roller ul').offsetWidth;//회전 배너 너비값
let betweenDistance = 1;//이동 크기 - 정수여야 함
originalID = window.setInterval(betweenRollCallback, parseInt(1000/100), betweenDistance, document.querySelector('#roller1'));
cloneID = window.setInterval(betweenRollCallback, parseInt(1000/100), betweenDistance, document.querySelector('#roller2'));
//인터벌 애니메이션 함수(공용)
function betweenRollCallback(d, roller){
let left = parseInt(roller.style.left);
roller.style.left = (left - d)+'px';//이동
//조건부 위치 리셋
if(rollerWidth + (left - d) <= 0){
roller.style.left = rollerWidth+'px';
}
}
});
롤링배너를 만드려고 하는데요 이미지 용량때문인지 shift+f5를 눌러 새로고침을 하면 겹치게 나오고
여기서 그냥 f5를하면 다시 원상복구가 됩니다.
항상 이미지가 겹치지 않도록 할수있을까요?
!-->답변 2
롤링요소들이 모두 고정 width, height 이면 크기 지정해 강제고정 하는 방법이 어떨까 싶은데
우선 로드에 시간이 걸리는 이미지 용량을 조절을 해야 할것 같습니다.
이미지 로드 후 재정렬 해주셔야 할것 같은데요?
전체 이미지 로드 전에 실행되서 그런것 같은데
답변을 작성하시기 전에 로그인 해주세요.