方法1（将js移到底部）

Question

我尝试在js中制作幻灯片并且它不起作用，我得到的是按顺序显示在屏幕上的图像，下一个和上一个链接只是将我发送到页面顶部。我无法理解为什么，我知道有效的解决方案，但我不明白为什么这个解决方案不起作用。我在网上找到的很多解决方案与这个解决方案非常相似而且它们都有效，但是这个解决方案没有，我最近才开始使用js所以我想象一下我错过了一些愚蠢的东西。这是HTML :(编辑：移动到html正文的底部）

var imgPos = 0;
var changeImage(0);                     //called so that images(except first one) are hidden intially
var imgs = document.getElementsByClassName("slides");  //creates an array, and fills it with all images with 'slides' class
var arrayLength = imgs.length;

function changeImage(x) {
    var i = 0;                      //used for counting through 'for' loop
    imgPos += x;                    //x will be either -1 or +1

    if (imgPos > arrayLength){      //if user goes beyond last img
        imgPos = 0;                 //go to first img
    }
    if (imgPos < 0){                    //if user goes before first img
        imgPos = arrayLength;       //go to furthest img
    }
    for (i = 0; i < arrayLength; i++){
        imgs[i].style.display = "none";     //this hides all the images
    }
    imgs[imgPos].style.display = "block";   //this then displays the image we want to see

    return false;
}

这是js：

double a = 29.0/10.0;

以下是错误：

未捕获的TypeError：无法读取未定义的属性'0'（...）slideshow.js：22

未捕获的TypeError：无法读取未定义（...）
的属性“1”

Answer 1

方法1（将js移到底部）

这将在你们所有人加载之后运行。

<html>
<head>
    <title></title>
    <link type="text/css" rel="stylesheet" href="CSS/mainPageStyle.css">
</head>
<body style="background-color:white">
    <div id="titleLogo"><h1>Custom Motorbikes</h1></div>

    <nav>
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">About Us</a></li>
            <li><a href="">Full ride list</a></li>
            <li><a href="">Custom ride</a></li>
            <li><a href="">Contact Us</a></li>
            <li><a href="">Login</a></li>
            <li><a href="">Register</a></li>
        </ul>
    </nav>

    <!-- front page slideshow: -->

    <img src="images/bikePerson.jpg" class="slides" style="width:100%" />
    <img src="images/bikePersonCountry.jpg" class="slides" style="width:100%" />
    <img src="images/bikeRoad.jpg" class="slides" style="width:100%"  />

    <a href="#" onclick="changeImage(1); return false;">Next Slide</a> <br/>
    <a href="#" onclick="changeImage(-1); return false;">Previous Slide</a> 


    <!-- front page slideshow -->
    <script type="text/javascript" src='JS/slideshow.js'></script>

</body>
</html>

方法2（准备好文件）

这将在你的dom加载后触发dom加载事件。

注意：您无法将函数分配给var var changeImage(0);您可以将函数的结果分配给变量：var myVar = changeImage(0);

var imgPos = 0;
var imgs = [];

function changeImage(x) {
    var i = 0;                      //used for counting through 'for' loop
    imgPos += x;                    //x will be either -1 or +1

    imgPos = imgPos + 1 > imgs.length ? 0 : imgPos;
    imgPos = imgPos < 0 ? imgs.length - 1 : imgPos;

    for (let i = 0; i < imgs.length; i++) {
        imgs[i].style.display = "none";     //this hides all the images
    }
    imgs[imgPos].style.display = "block";   //this then displays the image we want to see
    console.log(imgs[imgPos])
    return false;
}

document.addEventListener('DOMContentLoaded', event => {
    imgs = document.querySelectorAll("img.slides");  //creates an array, and fills it with all images with 'slides' class
    changeImage(0);                     //called so that images(except first one) are hidden intially
});

HTML / Javascript中的幻灯片

1 个答案:

方法1（将js移到底部）

方法2（准备好文件）