我自制的滑块不起作用

Question

我的自制图像滑块有问题，我收到错误：Uncaught TypeError: Cannot set property 'src' of 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

您似乎正试图通过更改图像的来源来遍历图像列表。如果是这样，请参考以下 JS fiddle 示例：

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 作为您的计数器。您可以使用 ++ 将数字加 1，例如 imagecount++;

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

最后，为了启动整个过程，我在您的窗口 onload 事件中添加了一个函数调用。每当你想调用一个函数时，记得使用 ()

window.onload = init();

Answer 3

正如另一张海报所说，不要使用 Image 作为变量名。

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