使用原生 JavaScript、CSS 和 HTML 创建轮播

问题描述 投票：0回答：2

This is a sample image：

我想做一个旋转木马，但是我不能让它动起来；我已经尝试使用特定或定义的数据，但它似乎不起作用。我试图让箭头按钮和点按钮起作用，以便它们在 div 中滚动，我还希望它在最后一张图像的末尾循环，从第一张开始。

我试着让它一张一张地移动。

let cards = document.querySelectorAll('.card');
let dots = document.querySelectorAll('.dot');
let arr_right = document.querySelector('.right');
let arr_left = document.querySelector('.left');
let mov = 274;
let cont = 0;


arr_right.addEventListener('click', function() {
  console.log('right');
  /*cards[1].style.background = '#0b6cf3';
  cards[1].style.left = '-'+ 200 + 'px';
  cards[1].style.transform = 'traslateX('+200+'px)';
  cards[1].style.color = '#e0f30b';*/
});

arr_left.addEventListener('click', function() {
  console.log('left');
});

//console.log('dots: ', dots.length);

for (let i = 0; i < dots.length; i++) {
  dots[i].addEventListener('click', function(event) {

  });

}
* {
  margin: 0;
  padding: 0;
}

.cont {
  width: 100%;
  background: #a8a8a8;
  display: flex;
}

.cont_card {
  display: flex;
}

.card {
  height: 300px;
  width: 274px;
  max-width: 600px;
  background: #08f687;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cont_dot {
  position: absolute;
  display: flex;
  justify-content: center;
  top: 330px;
  left: 50%;
}

.dot {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background: #000;
  margin: 3px;
  cursor: pointer;
}

.right {
  font-size: 50px;
  position: absolute;
  top: 25%;
  right: 0;
  background: #dcdcee;
  padding: 0 10px;
  cursor: pointer;
}

.left {
  font-size: 50px;
  position: absolute;
  top: 25%;
  left: 0;
  background: #dcdcee;
  padding: 0 10px;
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>

  <div class="cont">
    <div class="cont_card">
      <div class="card ">
        1/6
      </div>
      <div class="card ">
        2/6
      </div>
      <div class="card ">
        3/6
      </div>
      <div class="card ">
        4/6
      </div>
      <div class="card ">
        5/6
      </div>
      <div class="card ">
        6/6

      </div>
      <div class=" right">&#155;</div>
      <div class="left">&#139;</div>
      <br>
      <br>
      <div class="cont_dot">
        <div class="dot 1"></div>
        <div class="dot 2"></div>
        <div class="dot 3"></div>
        <div class="dot 4"></div>
        <div class="dot 5"></div>
        <div class="dot 6"></div>
      </div>

    </div>
  </div>
</body>

</html>

javascript html css carousel
2个回答
0
投票

我最近遇到了和你一样的问题，我想我设法得到了一个非常简单易懂的解决方案。另外，它使用与您的代码相同的想法，所以我认为它可以帮助您理解发生了什么。

看看这个片段：

class Carousel {
  constructor(element) {
    // Retrieve every elements needed by the carousel (arrows, dots, ...)
    this.content = element.querySelector(".carousel-content");
    this.arrowLeft = element.querySelector(".carousel-arrow-left");
    this.arrowRight = element.querySelector(".carousel-arrow-right");
    this.dots = element.querySelector(".carousel-navigation").children;
    // The index of the current active element of the carousel
    this.activeElement = 0;
  }

  // This function will make the element at index n visible in the carousel
  activateElement(n) {
    // Validate index
    if (n < 0 || n >= this.dots.length)
      return;
    this.activeElement = n;
    // Scroll the content to bring the element into view
    // this.content is the parent container of every elements
    // this.content.children[n] is the targeted element
    // .offsetLeft is the distance between the left of the element and the left border of the window
    // .scrollTo(x, y) scroll the element at x, y offset
    this.content.scrollTo(this.content.children[n].offsetLeft - this.content.offsetLeft, 0);
    // Activate the corresponding dot
    for (let i = 0; i < this.dots.length; i++)
      // .classList is the list of classes on the HTML element
      // .toggle(classes, force) is used to add or remove the given classes according to the boolean
      this.dots[i].classList.toggle("carousel-dot-active", this.activeElement === i);
    // Verify the left and right arrow to disable them if necessary
    this.arrowLeft.classList.toggle("carousel-arrow-disabled", this.activeElement === 0);
    this.arrowRight.classList.toggle("carousel-arrow-disabled", this.activeElement === this.dots.length - 1);
  }

  // This function will register and required event listeners
  addEventListeners() {
    // To handle the click on the dots
    for (let i = 0; i < this.dots.length; i++)
      this.dots[i].addEventListener("click", () => this.activateElement(i));
    // And on the left / right arrows
    this.arrowLeft.addEventListener("click", () => this.activateElement(this.activeElement - 1));
    this.arrowRight.addEventListener("click", () => this.activateElement(this.activeElement + 1));
  }
}

// Initialize the carousel for every HTML element with class "carousel"
const carousels = document.getElementsByClassName("carousel");
for (const carousel of carousels)
  new Carousel(carousel).addEventListeners();
.my-card {
  /* Your custom style for the inner elements */
  width: 100px;
  height: 100px;
  background: rebeccapurple;
  color: white;
  text-align: center;
  line-height: 100px;
}

.carousel {
  margin: 25px 75px;
}

.carousel-main {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 35px;
}

.carousel-content {
  display: flex;
  margin: 0 35px;
  max-width: 1400px;
  overflow-x: hidden; /* VERY IMPORTANT: We rely on scrolling so we hide the overflow */
  scroll-behavior: smooth;
}

.carousel-content > * {
  flex: 0 0 auto;
  margin-right: 50px;
}

.carousel-content > :last-child {
  margin-right: 0;
}

.carousel-arrow {
  flex: 0 0 auto;
  width: 35px;
  height: 35px;
  border: 5px solid black;
  transform: rotate(45deg);
  transition: 0.2s;
  cursor: pointer;
}

.carousel-arrow:hover {
  transform: rotate(45deg) scale(1.05);
}

.carousel-arrow-disabled,
.carousel-arrow-disabled:hover {
  opacity: 0.25;
  transform: rotate(45deg);
  cursor: auto;
}

.carousel-arrow-left {
  border-top: none;
  border-right: none;
}

.carousel-arrow-right {
  border-bottom: none;
  border-left: none;
}

.carousel-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-dot {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  margin: 0 15px;
  border: 3px solid black;
  transition: 0.1s;
  cursor: pointer;
}

.carousel-dot:hover {
  background-color: lightgray;
}

.carousel-dot-active,
.carousel-dot-active:hover {
  background-color: black;
  cursor: auto;
}
<div class="carousel">
  <div class="carousel-main">
    <div class="carousel-arrow carousel-arrow-disabled carousel-arrow-left"></div>
    <div class="carousel-content">
      <!-- Place here every elements of your carousel -->
      <div class="my-card">1/6</div>
      <div class="my-card">2/6</div>
      <div class="my-card">3/6</div>
      <div class="my-card">4/6</div>
      <div class="my-card">5/6</div>
      <div class="my-card">6/6</div>
    </div>
    <div class="carousel-arrow carousel-arrow-right"></div>
  </div>
  <div class="carousel-navigation">
    <!-- Insert the same number of dots here -->
    <div class="carousel-dot carousel-dot-active"></div>
    <div class="carousel-dot"></div>
    <div class="carousel-dot"></div>
    <div class="carousel-dot"></div>
    <div class="carousel-dot"></div>
    <div class="carousel-dot"></div>
  </div>
</div>

我根据你的要求改编了，我尽量写评论解释一下。大多数 CSS 都是通用样式，但我标记了其中最重要的部分！

-1
投票

我在这里提供了Codepen代码的链接，您可以在其中了解轮播功能并在您的项目中使用它下面是链接👇👇 [在此处输入链接描述][1] [1]: https://codepen.io/batukaraman/pen/GRXqPxN

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.