javascript - 纯 JS 颜色 slider

Question

我有一个带有 .images class 以及 previous- 和 next-button 的 slider 。

我在 JavaScript 中定义颜色是这样的:

let colors = ['red', 'green',];

目前，当我点击下一步按钮时，会显示红色。 (下面的功能)。

function nextSlide() {
  container.style.backgroundColor = colors[0];

我想要完成的是 当您单击下一个按钮时，它总是会显示 let colors 数组中的下一个颜色(或任何这种定义颜色的方式)。相反，当您单击上一个按钮时， slider 应显示数组中的上一个颜色。

您可以在下面找到完整的源代码。

const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');

let colors = ['red', 'blue',];

nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);

function nextSlide() {
  container.style.backgroundColor = colors[0];
}

function prevSlide() {
  container.style.backgroundColor = colors[1];
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightblue;
}
.images {
  background-color: #4047c9;
  flex: 0 0 80%;
  min-height: 70vh;
  border-radius: 10px;
  position: relative;
}
.btn {
  display: inline-block;
  background: white;
  color: black;
  padding: 10px;
  border: none;
  cursor: pointer;
}
.prevBtn {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.nextBtn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  -webkit-transform: translate(50%, -50%);
  -moz-transform: translate(50%, -50%);
  -ms-transform: translate(50%, -50%);
}

.btn:active {
  background-color: grey;
  color: white;
}

.btn:hover {
  background-color: grey;
  color: white;
}

  <div class="images">
    <button type="button" class="btn prevBtn">Prev Btn</button>
    <button type="button" class="btn nextBtn">Next Btn</button>
  </div>

Answer 1

如果您希望单击最后一张幻灯片时也转到第一张幻灯片，而单击左键时第一张幻灯片转到最后一张幻灯片，您可以使用模数技巧。

slideslength + currentslidenumber + directions %(modulus) slidelength

下面是一个例子。

const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');

let colors = ['red', 'green', 'blue',];
let currentSlide = 0;

function updateSlide(direction) {
  currentSlide = 
    (colors.length + currentSlide + direction)
    % colors.length;
  container.style.backgroundColor = colors[currentSlide];
}

updateSlide(0);

nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);

function nextSlide() {
  updateSlide(+1);
}

function prevSlide() {
  updateSlide(-1);
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightblue;
}

.images {
  background-color: #4047c9;
  flex: 0 0 80%;
  min-height: 70vh;
  border-radius: 10px;
  position: relative;
}

.btn {
  display: inline-block;
  background: white;
  color: black;
  padding: 10px;
  border: none;
  cursor: pointer;
}

.prevBtn {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}

.nextBtn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
}

.btn:active {
  background-color: grey;
  color: white;
}

.btn:hover {
  background-color: grey;
  color: white;
}

<div class="images">
    <button type="button" class="btn prevBtn">Prev Btn</button>
    <button type="button" class="btn nextBtn">Next Btn</button>
  </div>