javascript - 简单的 JS 轮播需要建议

Question

我正在尝试使用 JavaScript 创建一个简单的轮播，我遇到了一个问题，如何根据startingPosition值显示幻灯片？

const items = document.getElementsByClassName("carousel__item")
let startingPosition = 0;
let totalItems = items.length;

const prevButton = document.querySelector(".prev")
const nextButton = document.querySelector(".next")


prevButton.addEventListener("click", () => {
  if(startingPosition == 0) return;
  startingPosition--;
  }
);
nextButton.addEventListener("click", () => {
    startingPosition++;
  if(startingPosition == totalItems) {
  startingPosition = 0;
  }
}
);

.carousel {
  max-width: 400px;
  margin: 0 auto;
}

.carousel__item > img {
  width: 100%;
}

<div class="carousel">

<div class="carousel__item">
<img src="https://www.greenqueen.com.hk/wp-content/uploads/2021/06/WEF-Investments-In-Nature-Based-Solutions-Have-To-Triple-By-2030-To-Address-Climate-Change-Biodiversity-Loss.jpg" />
</div>
<div class="carousel__item">
<img src="https://tr-images.condecdn.net/image/LDM0pgM40l1/crop/2040/f/gettyimages-1146431497.jpg" />
</div>


</div>

<button class="prev">
Prev
</button>
<button class="next">
Next
</button>

标签： javascripthtml

Answer 1

您需要编写函数来显示基于startingPosition.

showSlides做同样的事情。它遍历所有carousel__item并隐藏所有这些并仅显示startingPosition位置的图片。

const items = document.getElementsByClassName("carousel__item")
        let startingPosition = 0;
        let totalItems = items.length;

        showSlides(startingPosition);

        const prevButton = document.querySelector(".prev")
        const nextButton = document.querySelector(".next")

        function showSlides(n) {
            var i;
            var slides = document.getElementsByClassName("carousel__item");
            if (n > slides.length) { startingPosition = 1 }
            if (n < 1) { startingPosition = slides.length }
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            slides[startingPosition - 1].style.display = "block";
        }

        prevButton.addEventListener("click", () => {
            if (startingPosition == 0) return;
            startingPosition--;

            showSlides(startingPosition);
        }
        );
        nextButton.addEventListener("click", () => {
            startingPosition++;
            if (startingPosition == totalItems) {
                startingPosition = 0;
            }
            showSlides(startingPosition);
        });

.carousel {
            max-width: 400px;
            margin: 0 auto;
        }

        .carousel__item > img {
            width: 250px;
            height: 150px;
        }

<div class="carousel">
        <div class="carousel__item">
            <img src="https://www.w3schools.com/howto/img_lights_wide.jpg" />
        </div>
        <div class="carousel__item">
            <img src="https://tr-images.condecdn.net/image/LDM0pgM40l1/crop/2040/f/gettyimages-1146431497.jpg" />
        </div>
    </div>

    <button class="prev">
        Prev
    </button>
    <button class="next">
        Next
    </button>