我自制的滑块不起作用

Question

我的自制图像滑块有问题，出现错误：未捕获类型错误：无法设置属性 '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 元素没有 img 的 ID，您似乎在尝试 select 标签名称。

我还建议不要使用 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 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 获取图像

由于您需要跟踪您使用的图像，我选择使用图像计数作为您的计数器。您可以使用 ++ 将数字递增 1，例如 imagecount++;

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

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

window.onload = init();

我自制的滑块不起作用

My self made slider doesn't work

html

javascript

slider