0

我正在为我的图像滑块编写一个脚本，因为它是我项目的一部分并且理解 javascript，但是，当我使用来自 fontawesome 的图标时，“上一个”和“下一个”按钮不起作用。我怀疑这是 CSS，因为没有视觉问题，只是与脚本相关。

剧本：

const repeatSlide = document.querySelector('.container-slide');
const repeatImages = document.querySelectorAll('.container-slide img');

const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');

let counter = 1;
const size = repeatImages[0].clientWidth;

repeatSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';


//Buttons
nextBtn.addEventListener('click', () => {
  if (counter >= repeatImages.length - 1) return;
  repeatSlide.style.transition = "transform 0.4s ease-in-out";
  counter++;
  repeatSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';

});

prevBtn.addEventListener('click', () => {
  if (counter <= 0) return;
  repeatSlide.style.transition = "transform 0.4s ease-in-out";
  counter--;
  repeatSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';

});

//

repeatSlide.addEventListener('transitionend', () => {
  console.log(repeatImages[counter]);
  if (repeatImages[counter].id === 'lastClone') {
    repeatSlide.style.transition = "none";
    counter = repeatImages.length - 2;
    repeatSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
  }

  if (repeatImages[counter].id === 'lastClone') {
    repeatSlide.style.transition = "none";
    counter = repeatImages.length - counter;
    repeatSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
  }
});

HTML：

<div class="one-container">
  <i class="fas fa-arrow-left" id="prevBtn"></i>
  <i class="fas fa-arrow-right" id="nextBtn"></i>
  <div class="container-slide">
    <img src="cisheader.jpg" id="lastClone" alt="">
    <img src="original-image.jpg" alt="">
    <img src="My-Setup-Full-78735e8a827756f2d0de095b5ceb587a-700x441.png" alt="">
    <img src="information-computer-tech.jpg" alt="">
    <img src="cisheader.jpg" alt="">
    <img src="original-image.jpg" id="firstClone" alt="">
  </div>
</div>

这是图像滑块的样子：图像

我知道它不是最漂亮的专业图像滑块，但我才刚刚开始更深入地编码。

感谢所有帮助:) 如果有人需要更多代码，我会提供

如果这有帮助，我正在使用这里的源代码：GitHub

4

1 回答 1

1 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
  <style>
    .one-container{
      border:2px solid blue;
      width: 210px;
      padding :20px;
      float:left;
    }
    .container-slide{
      border:1px solid black;
      height:210px;
      float:left;
    }
    i{
      float :left;
    }
    img{
      border:1px solid black;
      width:200px;
      height:200px;
      display:block;
      float: left;
    }
  </style>
<body>
<div class="one-container">
    // same as you done .... 
</div>
</body>
  <script>
                const repeatSlide = document.querySelector('.container-slide');
                const repeatImages = document.querySelectorAll('.container-slide img');

                const prevBtn = document.querySelector('#prevBtn');
                const nextBtn = document.querySelector('#nextBtn');

                let counter = 0;
                const size = repeatImages[0].clientWidth;

                repeatSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
                // set the width calculation +2 for adjusting border can remove if no border to image.
                repeatSlide.style.width = ((size+2) * (repeatImages.length) ) + 'px';
                //Buttons
                nextBtn.addEventListener('click',() => {

                    if (counter >= repeatImages.length - 1) return;
                    repeatSlide.style.transition = "transform 0.4s ease-in-out";
                    counter++;
                    repeatSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';


                    });

                prevBtn.addEventListener('click',() => {

                    if (counter <= 0) return;
                    repeatSlide.style.transition = "transform 0.4s ease-in-out";
                    counter--;
                    repeatSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';

                    }); 

                // not clear what you want to do with this.

                repeatSlide.addEventListener('transitionend', () =>{
                    console.log(repeatImages[counter]);
                    if (repeatImages[counter].id === 'lastClone') {
                        repeatSlide.style.transition = "none";
                        counter = repeatImages.length - 1;
                        repeatSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
                        }

                    if (repeatImages[counter].id === 'firstClone') {
                        repeatSlide.style.transition = "none";
                        counter = 0;
                        repeatSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
                        }
                    });
            </script>
</html>
于 2020-05-24T13:29:27.070 回答