<script>
var imgArray = document.getElementsByTagName("img");
for(var i=0; i<imgArray.length; i++) {
var obj = imgArray[i];
obj.style.zIndex = i;
obj.style.left = "20px";
obj.style.top = "20px";
obj.onclick = change;
//obj.onclick = change();하면 안먹는데 이유가 뭘까요?
}
function change() {
for(var i=0; i<imgArray.length; i++) {
var obj = imgArray[i];
obj.style.zIndex++;
obj.style.zIndex %= imgArray.length;
// zIndex = zIndex % imgArray.length 이것을 왜 해야하는지, 왜 %=인지 모르겠습니다.
}
}
</script>
1.
obj.onclick = change();의 의미는 change() 함수를 호출하고 그 결과 값을 obj.onclock에 넣는 것입니다.
그러므로 클릭할 때 함수 change()가 실행되도록 하겠다면 obj.onclick = change; 로 해서 함수의 이름(실제로는 주소)를 등록해야 합니다.
2.
하나의 이미지를 밑으로 내리기 위해서는 모든 이미지의 zIndex를 증가시키고
제일 큰 zIndex를 가진 이미지 즉 제일 위에 있는 이미지의 zIndex를 0으로 만들기 위한 것입니다.
만일 이미지가 총 8개 있다면 처음에는 zIndex가 다음과 같지요
0 1 2 3 4 5 6 7
제일 위에 것이 아래로 내려가려면 모든 이미지의 zIndex를 증가시키면
1 2 3 4 5 6 7 8
이 될 것입니다. 그런데 이미지의 크기 length가 8이므로
제일 위의 이미지의 zIndex는 8이고 이에 다음 코드가 실행되면
obj.style.zIndex %= imgArray.length;
8 % 8 = 0이 됩니다.
나머지 7개의 zIndex는 1~7이므로 8로 나눈 나머지는 그대로 1~7로 있게 됩니다. 결과적으로
다시 이미지들의 zIndex는 아래와 같이 됩니다.
0 1 2 3 4 5 6 7