Question

我的自制图像滑块有问题，我收到错误：未捕获TypeError：无法设置属性＆＃39; src＆＃39;为null

编辑：我已经调用了所有这样的图像：img1，img2，img3等，扩展名为.jpg

这是我的javascript代码：

     // JavaScript Document
var imagecount = 1;
var total = 3;


window.setInterval(function slideA(x) 
{
    var Image = document.getElementById('img');
    imagecount = imagecount + x;
    if(imagecount > total) { imagecount = 1; }
    if(imagecount < 1) { imagecount = total; }
    Image.src = "images_slider/img" + imagecount + ".jpeg";
}, 5000);

function init() 
{
    slideA();
}

window.onload = init;


<div id="LandingImage">
    <img src="../images/landingimage.png" alt="LandingImage" width="100%"         height="100%"  />  
    </div>

有人可以帮我吗？谢谢！

凯文。

Answer 1

您的html元素的ID不是img，您似乎在尝试选择标记名称。

我还建议不要使用Image作为变量名，因为Image是JavaScript中的对象名。

<img src="../images/landingimage.png" alt="LandingImage" width="100%" height="100%" id="img" /> <!-- id at the end, was missing -->

Answer 2

如另一张海报所述，请勿使用Image作为变量名称。

要访问元素的src属性，请使用element.setAttribute('src', 'insert src here')而不是element.src。

Answer 3

您似乎试图通过更改图像的来源来迭代图像列表。如果是这样，请参考以下JS小提琴作为示例：

https://jsfiddle.net/hqq1k2Lk/3/

我做了一些改动，所以让我们一起来看看吧。

// JavaScript Document
var imagecount = 1;
var total = 3;


function slideA()
{
    //slideA starts the interval
    window.setInterval(function(){
        var myImage = document.getElementById('LandingImage');
        imagecount++;
        if(imagecount > total) { imagecount = 1; }
        if(imagecount < 1) { imagecount = total; }
        myImage.src = "images_slider/img" + imagecount + ".jpeg";            
    }, 5000);
}

function init() 
{
    slideA();
}

window.onload = init();

首先，我在区间外移动了你的函数调用slideA。因此，调用slideA();将启动间隔。

接下来，我将您的ID LandingImage移动到img元素本身，因此我们可以使用document.getElementById('LandingImage');

从DOM获取图像

由于您需要跟踪您所处的图像，我选择使用imagecount作为您的计数器。您可以使用诸如imagecount++;

之类的++将数字增加1

正如其他人所指出的，Image是Javascript中受保护的对象名称，因此我将您的变量重命名为myImage

最后，为了启动整个过程，我在窗口onload事件中添加了一个函数调用。无论何时想要调用函数，请记住使用（）

window.onload = init();

我自制的滑块不起作用

3 个答案: