javascript - 同时更改滑块上的文本和图像

Question

我用一系列图像制作了一个滑块。我创建了两个允许浏览图像的按钮（上一个和下一个）。

我还创建了两个 div，其中放置了幻灯片的编号和标题。 我的目标是每次发生上一个或下一个按钮上的单击事件时同时更改幻灯片的图像、编号和标题。

几个月前我开始编程，我很难将图像与相应的标题和数字关联起来。

有人可以帮我完成我的代码吗？实际上，下面的代码可以让我在点击时显示图像，但并不完整。单击后，我想同时更改所有元素（图像、标题和编号）。

图片上的更多细节：主页的屏幕

// Carousel
let sliderImage = document.querySelector(".sliderImage");
let images = [
  "carousel1.jpg",
  "carousel2.jpg",
  "carousel3.jpg",
  "carousel4.jpg",
  "carousel5.jpg",
  "carousel6.jpg",
  "carousel7.jpg",
];

let i = 0; // Current image index

// I have already created in html file 2 btns with "onclick" event
// that trigger the following functions:

function prev() {
  if (i <= 0) i = images.length;
  i--;
  return getSlideImg();
}

function next() {
  if (i >= images.length - 1) i = -1;
  i++;
  return getSlideImg();
}

function getSlideImg() {
  return sliderImage.setAttribute("src", "img/" + images[i]);
}

<!-- Carousel -->
      <div class="carousel-container">
        <div class="carousel-slide">

          <img src="./img/carousel1.jpg" alt="" class="sliderImage"/>

          <!-- Carousel card -->
          <div class="carousel__card-container">
            <div class="carousel__card-title">Soggiorno</div>
            <div class="carousel__slide-data">
              <div class="slide__number">01</div>
              <div class="slide__loader">
                <div class="loader__line-grey">
                  <div class="loader__line-white"></div>
                </div>
              </div>
            </div>
          </div>

          <!-- Carousel buttons -->
          <div class="carousel-btn">
            <a href="#" class="button left-arrow bottone" id="prevBtn" onclick="prev()">
              <i class="ri-arrow-left-s-line btn-icon-small"></i>
            </a>

            <a href="#" class="button right-arrow bottone" id="nextBtn" onclick="next()">
              <i class="ri-arrow-right-s-line btn-icon-small"></i>
            </a>
          </div>
        </div>
      </div>

标签： javascriptslider

Answer 1

在函数内设置所有值，getSlideImg以便所有内容都将使用相应的图像进行更新

// Carousel
let sliderImage = document.querySelector(".sliderImage"),
    container = document.querySelector(".carousel-container")
let images = [
  "carousel1.jpg",
  "carousel2.jpg",
  "carousel3.jpg",
  "carousel4.jpg",
  "carousel5.jpg",
  "carousel6.jpg",
  "carousel7.jpg",
];

let i = 0; // Current image index

// I have already created in html file 2 btns with "onclick" event
// that trigger the following functions:

function prev() {
  if (i <= 0) i = images.length;
  i--;
  return getSlideImg();
}

function next() {
  if (i >= images.length - 1) i = -1;
  i++;
  return getSlideImg();
}

function getSlideImg() {
  container.querySelector(".slide__number").innerText = i + 1
  container.querySelector(".carousel__card-title").innerText = images[i]
  return sliderImage.setAttribute("src", "img/" + images[i]);
}

// for onload
getSlideImg()

<!-- Carousel -->
      <div class="carousel-container">
        <div class="carousel-slide">

          <img src="./img/carousel1.jpg" alt="" class="sliderImage"/>

          <!-- Carousel card -->
          <div class="carousel__card-container">
            <div class="carousel__card-title">Soggiorno</div>
            <div class="carousel__slide-data">
              <div class="slide__number">01</div>
              <div class="slide__loader">
                <div class="loader__line-grey">
                  <div class="loader__line-white"></div>
                </div>
              </div>
            </div>
          </div>

          <!-- Carousel buttons -->
          <div class="carousel-btn">
            <a href="#" class="button left-arrow bottone" id="prevBtn" onclick="prev()">
              <i class="ri-arrow-left-s-line btn-icon-small">prev</i>
            </a>

            <a href="#" class="button right-arrow bottone" id="nextBtn" onclick="next()">
              <i class="ri-arrow-right-s-line btn-icon-small">next</i>
            </a>
          </div>
        </div>
      </div>