속도 제어 기능이있는 이미지 애니메이션

Question

속도 제어 기능을 가진 이미지 애니메이션에 약간의 문제가 있습니다.

이미지를 변경하는 데 타임 아웃을 사용하지만 슬라이더를 사용하여 시간 초과 값을 변경하려고하지만 몇 가지 이유로 인해 작동하지 않습니다. 누군가가 우리를 도울 수 있습니까?

우리는 여기 Jfiddle 있습니다 http://jsfiddle.net/Kbroeren/fmd4xbew/

감사합니다! Kevin

var jArray = ["http://www.parijsalacarte.nl/images/mickey-mouse.jpg", "http://www.startpagina.nl/athene/dochters/cliparts-disney/images/donad%20duck-106.jpg", "http://images2.proud2bme.nl/hsfile_203909.jpg"]; 

var image_count = 0; 

function rollover(image_id, millisecs) { 
var image = document.getElementById(image_id); 
image.src = jArray[image_count]; 
image_count++; 

if (image_count >= jArray.length) { 
    image_count = 0; 
} 
var timeout = setTimeout("rollover('" + image_id + "'," + millisecs + ");", millisecs); 
} 

rollover("img1", 200); 


$(function() { 
var value; 
var $document = $(document), 
    $inputRange = $('input[type="range"]'); 

// Example functionality to demonstrate a value feedback 
function valueOutput(element) { 
    var value = element.value, 
     output = element.parentNode.getElementsByTagName('output')[0]; 
    output.innerHTML = value; 
} 
for (var i = $inputRange.length - 1; i >= 0; i--) { 
    valueOutput($inputRange[i]); 
}; 
$document.on('change', 'input[type="range"]', function (e) { 
    valueOutput(e.target); 
    rollover("img1", 200); 
}); 
// end 

$inputRange.rangeslider({ 
    polyfill: false 
}); 
}); 

Answer 1

무한대의 함수 호출을 중단하지 않고 계속 작성합니다.

처음으로 함수를 호출하면 함수 자체를 계속 호출합니다. 다음에 다른 간격 (밀리 초)으로 다시 호출하면 자체 호출을 시작합니다.

두 가지 다른 방법을 시도해 볼 수 있습니다. 1. setTimeout 대신 setInterval을 사용하십시오. 새 값으로 설정하기 전에 clearInterval을 사용하여 간격을 지 웁니다.

/// Call animation() every 200 ms 
var timer = setInterval("Animation()",200); 


function ChageSpeed(miliseces){ 

    ///Stop calling Animation() 
    clearInterval(timer); 

    /// Start calling Animation() every "miliseces" ms 
    timer = setInterval("Animation()",miliseces); 
} 

function Animation(){ 
    /// Animation code goes here 
} 

2.Or는 대신, 전역 변수 (쿨하지 않음)로 간격을 설정하고 사용자가 애니메이션 속도를 변경하고자 할 때 그냥에게 값을 변경합니다.

var millisecs = 200; 

function rollover(image_id) { 
    var image = document.getElementById(image_id); 
    image.src = jArray[image_count]; 
    image_count++; 

    if (image_count >= jArray.length) { 
     image_count = 0; 
    } 

    var timeout = setTimeout("rollover('" + image_id + "'," + millisecs + ");", millisecs); 
} 


$document.on('change', 'input[type="range"]', function (e) { 
    valueOutput(e.target); 
    millisecs = YourNewValue; 
});