Question

我使用Vanilla JS编写了一个简单的图片幻灯片，很遗憾，该幻灯片无法正常工作。它的结构在“容器”中的“部分”中。容器的溢出被隐藏了，在它下面有一个相对的“ span”圆圈，我想用它来控制幻灯片显示。

到目前为止，这是我的代码：

// Variables

let i;
let image = document.getElementsByClassName("image");
let slideIndex = 1;
let dots = document.getElementsByClassName("dots");


// Functions

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showImage(n) {
  if (n > image.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = image.length;
  }

  for (i = 0; i < image.length; i++) {
    image[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace("active", "");
  }
  image[slideIndex-1].style.display = "block";
  dots[slideIndex-1].classList.add("active");
}

showImage(slideIndex);

body {
  margin: 0;
  padding: 0;
  font-family: Helvetica;
}

.image-section {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  background-color: #303960;
}

.image-container {
  height: 600px;
  width: 900px;
  overflow: hidden;
  background-color: #f9f9f9;
}

.image {
  height: 600px;
  width: 900px;
}

.image-controller {
  height: 10vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dots {
  height: 30px;
  width: 30px;
  border-radius: 100%;
  background-color: #fff;
  margin: 0 10px;
  cursor: pointer;
}

.active {
  background-color: #f96d80;
}

  <section class="image-section">
      <div class="image-container">
        <div class="image" style="background-color: black">

        </div>
        <div class="image" style="background-color: red">

        </div>
        <div class="image" style="background-color: blue">

        </div>
        <div class="image" style="background-color: orange">

        </div>
        <div class="image" style="background-color: purple">

        </div>
        <div class="image" style="background-color: brown">

        </div>
      </div>
      <div class="image-controller">
        <span class="dots active" onclick="currentSlide(1)"></span>
        <span class="dots" onclick="currentSlide(2)"></span>
        <span class="dots" onclick="currentSlide(3)"></span>
        <span class="dots" onclick="currentSlide(4)"></span>
        <span class="dots" onclick="currentSlide(5)"></span>
        <span class="dots" onclick="currentSlide(6)"></span>
      </div>
    </section>

我假设这是我的for循环的问题，但我可能错了。任何建议都会很棒！

Answer 1

这是您要考虑的吗？您使代码有点太复杂了。

我更改了您的javascript代码中的所有内容，因为在您使用的所有不同方法名称及其调用方式中，什么都没有真正起作用。认为我只需键入几行代码来显示不同的思维方式就容易了。

您的images（应称为“图像”，因为其中有多个，因此不应称为“图像”）和dots数组从位置0开始，因此使用它。首先在第一个点元素的onclick方法中添加0作为参数。

然后只需跟踪先前的索引（prevSelection）并从先前选择的图像和点中删除.active类，同时将.active添加到新选择的图像和点中即可。我为.active的{{1}}添加了CSS样式。

但是，如果要添加滑动动画，则不是这样。

.image

// Variables

let images = document.getElementsByClassName("image");
let dots = document.getElementsByClassName("dots");

var prevSelection = 0;

function showSlides(slidePosition) {
  removeClass('active', prevSelection);
  addClass('active', slidePosition);
  
  prevSelection = slidePosition;
}

function removeClass(className, slidePosition) {
  dots  [slidePosition].classList.remove(className);
  images[slidePosition].classList.remove(className);
}

function addClass(className, slidePosition) {
  dots  [slidePosition].classList.add(className);
  images[slidePosition].classList.add(className);
}

body {
  margin: 0;
  padding: 0;
  font-family: Helvetica;
}

.image-section {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  background-color: #303960;
}

.image-container {
  height: 600px;
  width: 900px;
  overflow: hidden;
  background-color: #f9f9f9;
}

.image {
  display: none;
  height: 600px;
  width: 900px;
}

.image.active { /* added this */
  display: block;
}

.image-controller {
  height: 10vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dots {
  height: 30px;
  width: 30px;
  border-radius: 100%;
  background-color: #fff;
  margin: 0 10px;
  cursor: pointer;
}

.dots.active { /* added .dots for better clarity */
  background-color: #f96d80;
}

我的图片幻灯片有什么问题？ -香草Javascript

1 个答案: