原生JS实现两种轮播图的逻辑

原生JS实现轮播图

1. 中间的一列的轮播

1.1 HTML结构

<div class="carousel">
  <ul class="carousel-slides">
    <li><img src="image1.jpg" alt="Image 1"></li>
    <li><img src="image2.jpg" alt="Image 2"></li>
    <li><img src="image3.jpg" alt="Image 3"></li>
  </ul>
  <ul class="carousel-indicators">
    <li><button data-index="0">1</button></li>
    <li><button data-index="1">2</button></li>
    <li><button data-index="2">3</button></li>
  </ul>
</div>

1.2 CSS样式

.carousel {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.carousel-slides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.carousel-slides li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.carousel-slides li:first-child {
  display: block;
}

.carousel-indicators {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-indicators li {
  margin-right: 10px;
}

.carousel-indicators button {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: #fff;
  color: #000;
  font-size: 12px;
  cursor: pointer;
}

.carousel-indicators button:hover {
  background-color: #eee;
}

.carousel-indicators button.active {
  background-color: #000;
  color: #fff;
}

1.3 JavaScript脚本

const carousel = document.querySelector('.carousel');
const carouselSlides = carousel.querySelector('.carousel-slides');
const carouselIndicators = carousel.querySelector('.carousel-indicators');

// Get all the slides
const slides = carouselSlides.querySelectorAll('li');

// Get all the indicators
const indicators = carouselIndicators.querySelectorAll('li');

// Set the active slide and indicator
let activeSlideIndex = 0;
slides[activeSlideIndex].classList.add('active');
indicators[activeSlideIndex].classList.add('active');

// Add event listener to indicators
indicators.forEach((indicator, index) => {
  indicator.addEventListener('click', () => {
    // Remove active class from current slide and indicator
    slides[activeSlideIndex].classList.remove('active');
    indicators[activeSlideIndex].classList.remove('active');

    // Set the new active slide and indicator
    activeSlideIndex = index;
    slides[activeSlideIndex].classList.add('active');
    indicators[activeSlideIndex].classList.add('active');
  });
});

2. 左右两侧的轮播

2.1 HTML结构

<div class="carousel">
  <ul class="carousel-slides">
    <li><img src="image1.jpg" alt="Image 1"></li>
    <li><img src="image2.jpg" alt="Image 2"></li>
    <li><img src="image3.jpg" alt="Image 3"></li>
  </ul>
  <button class="carousel-prev">←</button>
  <button class="carousel-next">→</button>
</div>

2.2 CSS样式

.carousel {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.carousel-slides {
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  height: 100%;
}

.carousel-slides li {
  position: absolute;
  top: 0;
  left: 0;
  width: 33.33%;
  height: 100%;
  display: none;
}

.carousel-slides li:first-child {
  display: block;
}

.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background-color: #ccc;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

.carousel-prev {
  left: 0;
}

.carousel-next {
  right: 0;
}

.carousel-prev:hover,
.carousel-next:hover {
  background-color: #eee;
}

2.3 JavaScript脚本

const carousel = document.querySelector('.carousel');
const carouselSlides = carousel.querySelector('.carousel-slides');
const carouselPrev = carousel.querySelector('.carousel-prev');
const carouselNext = carousel.querySelector('.carousel-next');

// Get all the slides
const slides = carouselSlides.querySelectorAll('li');

// Set the active slide index
let activeSlideIndex = 0;

// Add event listener to previous button
carouselPrev.addEventListener('click', () => {
  // Remove active class from current slide
  slides[activeSlideIndex].classList.remove('active');

  // Decrement the active slide index
  activeSlideIndex--;

  // If the active slide index is less than 0, set it to the last slide
  if (activeSlideIndex < 0) {
    activeSlideIndex = slides.length - 1;
  }

  // Set the new active slide
  slides[activeSlideIndex].classList.add('active');
});

// Add event listener to next button
carouselNext.addEventListener('click', () => {
  // Remove active class from current slide
  slides[activeSlideIndex].classList.remove('active');

  // Increment the active slide index
  activeSlideIndex++;

  // If the active slide index is greater than or equal to the number of slides, set it to the first slide
  if (activeSlideIndex >= slides.length) {
    activeSlideIndex = 0;
  }

  // Set the new active slide
  slides[activeSlideIndex].classList.add('active');
});

总结

本文介绍了两种使用原生JS实现轮播图的逻辑。第一种是中间的一列的轮播，用户点击图中中间位置带序号的类似按钮，背景会切换到对应的背景图片，且点亮当前点击后的类似按钮，当点击下一个按钮时，背景图片会切换。第二种是左右两侧的轮播，用户点击左右两侧的按钮，背景图片会相应地向左或向右切换。希望本文对您有所帮助。