Question

所以我在使用javascript对幻灯片进行字幕设置时遇到问题，有人可以告诉我哪里出错了。我的代码就是这样：

JavaScript文档

var index = 0;
var titles=[1,2,3,4,5];
var img = document.getElementById("img1");

function moveToNextSlide()
{
if (index >= 5){index = 0}
var img = document.getElementById("img1");
var slideName = "movieImages/img" + titles[index++] + ".jpg";
img.src=slideName;
CaptionSlide();

}


function CaptionSlide()
{

if( img.attr("src") == "movieImages/img1.jpg")
    document.getElementById("captionbar").innerHTML="Up!";
else if(img.attr("src") == "movieImages/img2.jpg")
    document.getElementById("captionbar").innerHTML="Monsters Inc";
else if(img.attr("src") == "movieImages/img3.jpg")
    document.getElementById("captionbar").innerHTML="Madagascar";
else if(img.attr("src") == "movieImages/img4.jpg")
    document.getElementById("captionbar").innerHTML="Finding Nemo";
else if(img.attr("src") == "movieImages/img5.jpg")
    document.getElementById("captionbar").innerHTML="Ice Age";
}

HTML文档

<div class="slides">
    <img id="img1" src="">
</div>
<input type="image" src="images/Next.png" id="button" onClick="javascript:moveToNextSlide()" title="Next" >
<div id ="captionbar"></div>

还要注意，我在“inspect element”中得到了这个错误：未捕获的TypeError：无法调用null的方法'attr'

REVISED

var index = 0;
var titles=[1,2,3,4,5];
var img = document.getElementById("img1");

function moveToNextSlide()
{
if (index >= 5){index = 0}
img = document.getElementById("img1");
var slideName = "movieImages/img" + titles[index++] + ".jpg";
img.src=slideName;
CaptionSlide();

}

function CaptionSlide()
{
    window.onload = function(){
    if( img.src === "movieImages/img1.jpg")
    document.getElementById("captionbar").innerHTML="Up!";
    else if(img.src === "movieImages/img2.jpg")
        document.getElementById("captionbar").innerHTML="Monsters Inc";
    else if(img.src === "movieImages/img3.jpg")
        document.getElementById("captionbar").innerHTML="Madagascar";
    else if(img.src === "movieImages/img4.jpg")
        document.getElementById("captionbar").innerHTML="Finding Nemo";
    else if(img.src === "movieImages/img5.jpg")
        document.getElementById("captionbar").innerHTML="Ice Age";
    }
}

HTML保持与以前相同。没有错误引用，但函数不会写任何文本。

Answer 1

将所有img.attr('src')替换为img.src=="your image name"。

例如：

img.src=="movieImages/img1.jpg"

当您使用纯JavaScript时，您无法使用attr() JQuery的方法。

Answer 2

attr()是JQuery带来的方法。如果您不使用JQuery，则应继续使用img.src。我注意到的另一件事可能会引起麻烦：当您从图像中读取.src时，您将获得完整路径作为返回（包括您的域）。您的条件将成为：

img.src === "http://yourdomain.com/movieImages/img1.jpg"

（我只是检查确定：http://www.w3schools.com/jsref/prop_img_src.asp提到img.src的返回值包括协议和域名

此外，我认为您应在CaptionSlide内定义您的功能moveToNextSlide，以便它可以访问更新的img变量或未在img函数中声明您的moveToNextSlide变量（以便更改全局变量）

另一点：在查询DOM之前应确保加载DOM（例如img）。为此，请将代码包装在函数中，并将其分配给window.onload事件：

window.onload = function() {
    var index = 0;
    var titles=[1,2,3,4,5];
    var img = document.getElementById("img1");

    function moveToNextSlide()
    {
        ...
    }

    function CaptionSlide()
    {
        if( ... )
        ...
    }

    document.getElementById("button").addEventListener('click', moveToNextSlide);
}

按钮的

和HTML：

<input type="image" src="images/Next.png" id="button" title="Next" />

带有标题问题的Javascript幻灯片

2 个答案: