时间戳

首页 > 解决方案 > 如何使我的 javascript 滑块工作？

javascript - 如何使我的 javascript 滑块工作？

问题描述

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

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>

标签： javascriptslider

解决方案

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

  1. 正如@VolodymyrI.I 指出的那样，您没有在任何地方实例化对象。没有它，您的 JS 代码只是一个定义，但从未执行。new slider通过在定义之外的某个地方调用来创建一个对象。就在下面就可以了。

  2. 现在你的构造函数运行了，但是你会遇到错误。原因之一是 JS 如何this根据上下文进行处理。简而言之，您希望this指向您的对象以访问诸如this.slide. 与其将您的 onclick 定义为function () {/**/}，不如将其定义为()=>{/**/}。this现在将指向对象，而不是函数上下文。

  3. 我看到您想this.i用作当前显示的图像的索引。onclick每次单击按钮时都会运行 - 每次，索引都将设置为 0。您可能希望在onclick.

  4. 图像 ID 是 greee，document.getElementById("slide").src = this.slide[++this.i]; 将不起作用。

  5. 查看索引 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>

推荐阅读