具有速度控制的图像动画

Image animation with speed control

本文关键字：图像 动画 控制 速度      更新时间：2023-09-26

我们在速度控制的图像动画方面遇到了一些问题。

它

利用超时来更改图像，但我们想使用滑块更改超时值，但由于某种原因，它不起作用。有人可以帮助我们吗？

我们这里有一个Jfiddle：http://jsfiddle.net/Kbroeren/fmd4xbew/

谢谢！凯文

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
});
});

你不断地创建越来越多的无限函数调用而不停止它们。

第一次调用函数后，它会不断调用自身。然后你以不同的间隔（毫秒）再次调用它，它也将开始调用自己。

您可以尝试两种不同的方法。1.使用 setInterval 而不是 setTimeout。使用 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.或者，相反，将间隔设置为全局变量（不酷），并在用户想要更改动画速度时更改其值。

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;
});
相关文章：