我的自制滑块不起作用

Question

我的自制图像滑块有问题，出现错误：未捕获类型错误：无法将属性"src"设置为 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 小提琴作为示例：

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 。