HTML中的简单javascript幻灯片放映似乎无法正常工作

时间:2015-02-21 08:32:36

标签: javascript html slideshow

解决!

HTML / CSS是我的第一次编程尝试,我已经学习了大约一个月了。对于我的第一个重大项目,我意识到我需要JS来添加一个简单的幻灯片。

搜索完之后,我发现了tutorial on Youtube可以做我想要的,但是在关注之后我似乎无法让脚本文件正常工作。我不知道脚本文件本身是否甚至是加载,或者是否是脚本中的逻辑错误。

我已将其从我的主项目中删除并在基本的html文档中进行测试,但它似乎无法正常工作。

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Testing js</title>
    </head>
    <body>
        <img id="homeSlideshow" src="1.gif" />
        <script src="slideshow.js"></script>
    </body>
</html>

slideshow.js

var myImage=document.getElementById("homeSlideshow");
var imageArray=["1.gif", "2.gif", "3.gif", "4.gif", "5.gif"];
var imageIndex=0;


function changeImage () {
    homeSlideshow.setAttribute("src", imageArray[imageIndex]);
    imageIndex++;
    if (imageIndex>=imageArray.length) {
        imageIndex=0;
    }
}

var intervalHandle = setInterval(changeImage,1000);

文件夹本身包含:

1.gif
2.gif
3.gif
4.gif
5.gif
index.html
slideshow.js

我确定这是一个简单的错误,但在我根本看不到它之前从未使用过JS。谢谢你的帮助。

0 个答案:

没有答案