Question

我正在尝试使“下一个/上一个”按钮起作用，以便图像进行翻译。 nextbtn不执行任何操作。我还将Google Chrome浏览器用作浏览器，但很奇怪的是，当我查看控制台时，计数器变量没有增加。

//------Selections------
const ImagesSlider = document.querySelector('.images-slider');
const Wrapper = document.querySelectorAll('.images-slider img');

//Buttons
const Prevbtn = document.querySelector('#PrevBtn');
const Nextbtn = document.querySelector('#NextBtn');

//------Counter------
let counter = 0;
const size = ImagesSlider[0].clientWidth;

//Button listeners

Nextbtn.addEventListener('click', () => {
  ImagesSlider.style.transition = "transform 0.4s ease-in-out";
  counter++;
  console.log(counter);
  ImagesSlider.style.transform = 'translateX(' + (-size * counter) + 'px)';
});

body {
  margin: 0;
  font-family: 'open sans', sans-serif;
  overflow-x: hidden;
  padding: 0;
  box-sizing: border-box;
}

.Wrapper {
  width: 60%;
  left: 13%;
  margin: auto;
  position: absolute;
  top: 97px;
  border: 5px solid black;
}

.images-slider {
  text-align: center;
  display: flex;
}

.images-slider img {
  width: 100%;
  height: 500px;
}

<div class="Wrapper">
  <div class="images-slider">
    <img src="Images/B612_20180502_192131_304.jpg" alt="">
    <img src="Images/IMG_20180502_214453_853.jpg" alt="">
    <img src="Images/image_bda54545-4e20-4ca9-84d6-f4ba9c24cbe220180504_190129.jpg" alt="">
  </div>
</div>

<button id="NextBtn">Next</button>
<button id="PrevBtn">Prev</button>

Answer 1

您必须做三件事：

使用const size = ImagesSlider.clientWidth;而不是const size = ImagesSlider [0] .clientWidth;
在关闭body标签之前，在脚本标签中输入const size = ImagesSlider.clientWidth。如果您将其保留在head标签中，则由于图像尚未加载，将无法定义。
还为“ prev”按钮添加代码，并带有“ counter-”

如果您想使用适合您的完整代码，则为：

<html>
<head>
    <style>
        body {
            margin: 0;
            font-family: 'open sans', sans-serif;
            overflow-x: hidden;
            padding: 0;
            box-sizing: border-box;
        }

        .Wrapper {
            width: 60%;
            left: 13%;
            margin: auto;
            position: absolute;
            top: 97px;
            border: 5px solid black;
        }

        .images-slider {
            text-align: center;
            display: flex;
        }

        .images-slider img {
            width: 100%;
            height: 500px;
        }
    </style>
</head>

<body>
    <div class="Wrapper">
        <div class="images-slider">
            <img src="Images/a.jpg" alt="">
            <img src="Images/b.jpg" alt="">
            <img src="Images/c.jpg" alt="">
        </div>
    </div>

    <button id="NextBtn">Next</button>
    <button id="PrevBtn">Prev</button>

    <script>
        // function script() {
        //------Selections------
        const ImagesSlider = document.querySelector('.images-slider');
        const Wrapper = document.querySelectorAll('.images-slider img');

        //Buttons
        const Prevbtn = document.querySelector('#PrevBtn');
        const Nextbtn = document.querySelector('#NextBtn');

        //------Counter------
        let counter = 0;
        const size = ImagesSlider.clientWidth;

        //Button listeners

        Nextbtn.addEventListener('click', () => {
            ImagesSlider.style.transition = "transform 0.4s ease-in-out";
            counter++;
            console.log(counter);
            ImagesSlider.style.transform = 'translateX(' + (-size * counter) + 'px)';
        });

        Prevbtn.addEventListener('click', () => {
            ImagesSlider.style.transition = "transform 0.4s ease-in-out";
            counter--;
            console.log(counter);
            ImagesSlider.style.transform = 'translateX(' + (-size * counter) + 'px)';
        });

            // }
    </script>

</body>

</html>

单击处理程序未在图像滑块中触发

1 个答案: