带滑块的画布幻灯片答案

【问题标题】：Canvas Slideshow with slider带滑块的画布幻灯片
【发布时间】：2021-05-09 18:45:38
【问题描述】：

我想用速度控制器创建画布幻灯片。但是滑块不起作用。它不是控制幻灯片的速度。我可以从 setinterval 值手动更改该值，但我想控制何时移动滑块但它不起作用。除此之外一切正常。这是我的代码：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1> Slider </h1>
<canvas id="myCanvas" width="400" height="300"
style="border:1px solid #d3d3d3;">
</canvas>
   
<div class="slideshow-container">
<div style="text-align:left">  
    <input id="speed" name="speed" type="range" min="1" max="5" value="3">
    <p style="color: black">Value: <span id="speedValue"></span></p>  </div>
       
   <script>     
         
            var slider = document.getElementById("speed");
            var output = document.getElementById("speedValue");
            var speedMod= 3;
            output.innerHTML = slider.value;
            
            slider.oninput = function() {
            output.innerHTML = this.value;
            speedMod = this.value; 
            }
                        
var image0 = new Image();
image0.src = "http://placekitten.com/200/300";
var image1 = new Image();
image1.src = "http://placekitten.com/205/305";
var image2 = new Image();
image2.src = "http://placekitten.com/300/400";
var image3 = new Image();
image3.src = "http://placekitten.com/800/600";

images = new Array(image0, image1, image2, image3);

var counter = 0, ctx;

function draw(){
    myCanvas = document.getElementById("myCanvas");
    ctx = myCanvas.getContext("2d");         
               
}


function draw_next_image(){
    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
    ctx.drawImage(images[counter], 0, 0);
    counter++;
   if (counter==images.length) {counter=0;}
    ;
     
}
setInterval(draw_next_image, speedMod*1000);
window.onload = draw;

</script>

【问题讨论】：

嗨，draw_next_image 函数中的images 是什么？
这是图片数组
你在哪里定义的？
刚刚添加。被误删了
你的body标签没有正确关闭，脚本标签应该在body标签之外。

标签： javascript html css canvas

【解决方案1】：

这段代码有两个主要问题：

移动滑块时未设置新间隔
速度设置相反，5 表示 5 秒的间隔，1 表示 1 秒的间隔。

对于第一个问题，我们需要通过调用 setInterval 来重置间隔，但请注意，如果您这样做了，您将在每次移动滑块时设置一个新的间隔计时器，但旧的仍然会运行，所以您会得到一些奇怪的时间效应（最终甚至会遇到存储问题）。

在设置时间间隔时，您必须清除之前的任何设置。

对于错误的速度，此 sn-p 只需从 6 中减去滑块值，当值为 5 时为 1 秒，当值为 1 时为 5 秒。如果您正在考虑尝试放入不同的范围一些更复杂的代码，它将从任何范围计算所需的间隔。

            var slider = document.getElementById("speed");
            var output = document.getElementById("speedValue");
            var speedMod= 3;
            let interval; //will be set by setInterval
            
            output.innerHTML = slider.value;
            
            slider.oninput = function() {
            output.innerHTML = this.value;
            speedMod = this.value;
            clearInterval(interval);
            interval = setInterval(draw_next_image, (6-speedMod)*1000);            
            }
                        
var image0 = new Image();
image0.src = "http://placekitten.com/200/300";
var image1 = new Image();
image1.src = "http://placekitten.com/205/305";
var image2 = new Image();
image2.src = "http://placekitten.com/300/400";
var image3 = new Image();
image3.src = "http://placekitten.com/800/600";

images = new Array(image0, image1, image2, image3);

var counter = 0; var ctx;
function draw(){
    myCanvas = document.getElementById("myCanvas");
    ctx = myCanvas.getContext("2d");         
               
}
function draw_next_image(){
    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
    ctx.drawImage(images[counter], 0, 0);
    counter++;
   if (counter==images.length) {counter=0;}
    ;
     
}
clearInterval(interval);
interval = setInterval(draw_next_image, (6-speedMod)*1000);
window.onload = draw;

<h1> Slider </h1>
<canvas id="myCanvas" width="400" height="300"
style="border:1px solid #d3d3d3;">
</canvas>
   
<div class="slideshow-container">
<div style="text-align:left">  
    <input id="speed" name="speed" type="range" min="1" max="5" value="3">
    <p style="color: black">Value: <span id="speedValue"></span></p>  </div>

顺便说一句，在加载图像之前绘制画布（window.onload 在这种情况下不做任何事情），在看到图像之前会有一个暂停。

【讨论】：