동일한 페이지에서 여러 이미지 변경

Question

이 스크립트를 사용하여 마우스 오버시 이미지를 반복합니다. 같은 페이지에서 여러 사진에 대해 어떻게이 작업을 수행합니까?

<script> 
var myImages = [1, 2, 3] 
var img_index = 0; 
var timer; 
var imgId = "myImg"; 

// Start animation 
function animate() { 
    me = document.getElementById(imgId); 

    me.src = "Pictures/" + "test" + myImages[img_index] + ".png" 

    img_index++; 

    if (img_index == myImages.length){ 
     img_index = 0; 
    } 
    timer = setTimeout(animate, 500); 

} 

function stopAnimation() { 
    clearTimeout(timer); 
    me.src="Pictures/test1.png" 
} 
</script> 

<img class= "format" id="myImg" onmouseover="imgId = this.id; timer = setTimeout(animate, 1000);" onmouseout="stopAnimation();" src="Pictures/test1.png" /> 

Answer 1

특정 요소와 작동하려면 사례 별 기능을 사용해야합니다. 이렇게하려면 상수와 전역 변수를 지역 변수, 특히 함수 인수로 대체해야합니다. 이상적으로는 HTML 노드, 배열 및 지연 시간을 사용할 수있는 함수가 필요합니다. 또한이 특정 문제에 대해서는 재귀를 사용하여 var img_index을 제거 할 수 있습니다.

내가 이런 짓을 했을까 : 여러 애니메이션에 코드를 적용 할 때문에

var myImages = [1, 2, 3]; 
var timeouts={}; 

// Start Animation of HTML object obj with images in array arr and a delay time. 
function startAnimation(obj,arr,time){ 
    timeouts[obj.id] = setTimeout(function(){ 
     animate(this,arr,time,0); 
    },time); 
} 
// Animate, index used to keep track of image number 
function animate(obj,arr,time,index){ 
    obj.src = "Pictures/" + "test" + arr[index] + ".png"; 
    timeouts[obj.id] = setTimeout(function(){ 
     animate(this,arr,time,(index==arr.length)?0:index++); 
    },time); 
} 
// End the animation of HTML object obj 
function stopAnimation(obj){ 
    clearTimeout(timeouts[obj.id]); 
} 

, 둘 이상의 배열 (애니메이션 당 하나)를 사용하는 방법을 고려해야합니다. 이것은 인수가 arr 인 이유입니다. 또한 다른 HTML 요소 (이미지)를 고려해야하며 이는 obj 인수의 용도입니다. id가 아닌 객체에 대한 참조를 함수에 전달하면 document.getElementById(...)을 사용할 필요가 없습니다. 즉, 애니메이션 기능은 id가 아닌 image 요소에 대한 참조로 작업합니다. 또한 애니메이션에서 애니메이션까지의 시간 지연을 변경할 수도 있습니다. 이는 time 인수가 필요한 것입니다.

animate(...) 함수는 index 인수에 하나를 추가하는 동안 자신을 (재귀) 호출합니다. 이 변수는 img_index 변수와 같지만 추가 변수는 없습니다.

그리고 HTML이 경우

<img class="format" id="myImg" onmouseover="startAnimation(this,myImages,500)" onmouseout="stopAnimation(this);" src="Pictures/test1.png" /> 

, 이미지 요소에 가변 this 포인트. 일반적으로 이벤트를 처리 할 때 이벤트를 발생시킨 요소를 가리 킵니다.

document.getElementById("myImg").onmouseover = function(){ 
    startAnimation(this,myImages,500) 
} 
document.getElementById("myImg").onmouseout = function(){ 
    stopAnimation(this) 
}