我怎样才能让我的 javascript 滑块工作？

Question

我今天开始了面向对象编程。 我试图重新制作我用意大利面代码制作的东西，但我无法让它工作。

class slider{
    constructor(){
        this.slide = ["images/slide1.jpg", "images/slide2.jpg", "images/slide3.jpg", ];
        this.next = document.getElementById('next');
        this.previous = document.getElementById('previous');
        this.bouttonSlider = this.next.onclick = function (){
            this.i = 0;
            document.getElementById("slide").src = this.slide[++this.i];
            if (i >= 2){
                i=0;
            }
        }
    }
};

这是我的 html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="slider" style="width: 75%; margin-left: auto; margin-right: auto;">
    <img src="images/slide1.jpg" style="width: 100%;" id="greee">
</div>
<button id="previous">previous</button>
<button id="next">next</button>
<script src="script.js"></script>    
</body>
</html>

Answer 1

上面的代码段存在一些问题，但您走在正确的轨道上。

正如@VolodymyrI.I 指出的那样，您没有在任何地方实例化对象。 没有它，您的 JS 代码只是一个定义，但从未执行过。 通过在定义之外的某处调用new slider创建一个对象。 下面就可以了。
现在你的构造函数运行了，但是你会遇到错误。 原因之一是 JS 如何根据上下文处理this 。 简而言之，您希望this指向您的对象，以便访问this.slide类的this.slide 。 不要将您的 onclick 定义为function () {/**/} ，而是将其定义为()=>{/**/} 。 this现在将指向对象，而不是函数上下文。
我看到您想使用this.i作为当前显示的图像的索引。 每次单击按钮时都会运行一次onclick - 每次，索引都将设置为 0。您可能希望在onclick之外使用它。
图片ID为greee, document.getElementById("slide").src = this.slide[++this.i]; 不管用。
看看索引 0 处的图片是否曾经与您的逻辑一起显示。

如果您遇到困难，请参阅下面的代码片段。 请注意，它的索引也有一个小错误。 索引很难！

 class slider{ constructor(){ this.slide = [ "https://i.imgur.com/EdDe8GHg.jpg", "https://i.imgur.com/bOlGI3ig.jpg", "https://i.imgur.com/TQaR2c4g.jpg"]; this.next = document.getElementById('next'); this.previous = document.getElementById('previous'); this.index = 0; this.next.onclick = () => { if (this.index >= 3){ this.index=0; } document.getElementById("greee").src = this.slide[this.index]; this.index++; } } }; new slider();

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="slider" style="width: 75%; margin-left: auto; margin-right: auto;"> <img src="https://i.imgur.com/EdDe8GHg.jpg" style="width: 100%;" id="greee"> </div> <button id="previous">previous</button> <button id="next">next</button> <script src="script.js"></script> </body> </html>

我怎样才能让我的 javascript 滑块工作？

问题描述

1 个解决方案

解决方案1
2 2019-11-27 10:43:37

我怎样才能让我的 javascript 滑块工作？

问题描述

1 个解决方案

解决方案1 2 2019-11-27 10:43:37

解决方案1
2 2019-11-27 10:43:37