使用填充数组错误更改 Img 属性

Question

我对 JavaScript 还很陌生，很难理解为什么这小段代码不能正常工作。在函数 'change(slide)' 中，如果我使用 alert() 函数显示传递给它的任何数组，则会显示预期的结果。但是，当我希望将结果分配给图像的 src 属性时，我收到一条错误消息，指出

未捕获的类型错误：无法读取 null 的属性“setAttribute” 未捕获的类型错误：无法读取未定义的属性“0”

我正在寻找最合适和最有效的方法来将我的多样化 src 文本分配到我的图像中。

function loadSlider(){
    var stocker = new Array();

    for(var i = 0; i<15; i++){
        stocker.push("C:\\Users\\Rickep\\random_pics\\"+i+".jpg");

    }

    return stocker;
}   

var slider = new Array();
slider = loadSlider();
change(slider);



function change(slide){
document.getElementById('imageToFill').setAttribute('src',slide[1]);

}


</script>   

<div id="filler">
    <img id="imageToFill"></img>
</div>

Answer 1

您在创建 img 标签之前触发了change(slider);。

将onload="change(slider);" 添加到您的正文标签（并删除当前调用）应该可以解决。

如果您使用的是 JQuery，这也可以是 $('document').ready(function(){change(slider);});，而不是当前的更改调用。

看看setInterval 实际交换您的图像。

var currentSlide = 0;
$('document').ready(function(){
   setInterval(change, 5000); // 5 seconds
});

function change(){
  currentSlide = (currentSlide+1) % slider.length;
  document.getElementById('imageToFill').setAttribute('src',slider[currentSlide]);
}