그래서 숫자로 끝나는 변수 세트가 있고 각 변수를 대상으로하고 클래스를 동적으로 제거 및 추가하고 싶습니다. 나는 그것을 알아낼 수 없다, 어떤 아이디어?
var img1 = document.getElementById('img1'),
img2 = document.getElementById('img2'),
img3 = document.getElementById('img3'),
img4 = document.getElementById('img4');
counter = 0;
for(i=1; i < 5; i++){
counter++;
img+counter.classList.remove('hideImg');
img+counter.classList.add('showImg');
}
이미지를 배열 또는 객체에 저장하고 요소를 반복합니다. 인덱스 또는 키를 통해 액세스 할 수 있습니다.
다음은 배열의 예입니다.
var img1 = document.getElementById('img1'),
img2 = document.getElementById('img2'),
img3 = document.getElementById('img3'),
img4 = document.getElementById('img4');
var images = [img1, img2, img3, img4];
for (var i = 0; i < images.length; i++) {
images[i].classList.remove('hideImg');
images[i].classList.add('showImg');
}
다음은 객체가있는 예입니다.
var img1 = document.getElementById('img1'),
img2 = document.getElementById('img2'),
img3 = document.getElementById('img3'),
img4 = document.getElementById('img4');
var images = {
img1: img1,
img2: img2,
img3: img3,
img4: img4
};
for (imagekey in images) {
images[imageKey].classList.remove('hideImg');
images[imageKey].classList.add('showImg');
}
다음은 배열이있는 예이며, 중간에 지연이있는 한 번에 하나의 이미지 만 표시합니다.
var img1 = document.getElementById('img1'),
img2 = document.getElementById('img2'),
img3 = document.getElementById('img3'),
img4 = document.getElementById('img4');
var images = [img1, img2, img3, img4];
var i = 0;
setInterval(cycleImage, 3000);
function cycleImage() {
images[i].classList.remove('hideImg');
images[i].classList.add('showImg');
if (i === images.length) {
i = 0;
} else {
i++;
}
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다