同时显示4张图片的自动轮播源码 的多种方法

以下是几种同时显示4张图片的自动轮播的源码实现方法：

方法一：使用Flexbox布局和JavaScript实现

HTML部分：

<div class="slider">
  <div class="slider-container">
    <img src="image-1.jpg">
    <img src="image-2.jpg">
    <img src="image-3.jpg">
    <img src="image-4.jpg">
  </div>
</div>

CSS部分：

.slider {
  width: 100%;
  overflow: hidden;
}

.slider-container {
  display: flex;
  width: 400%;
  animation: slide 10s infinite linear;
}

.slider-container img {
  width: 25%;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-25%);
  }
  55% {
    transform: translateX(-25%);
  }
  60% {
    transform: translateX(-50%);
  }
  85% {
    transform: translateX(-50%);
  }
  90% {
    transform: translateX(-75%);
  }
  100% {
    transform: translateX(-75%);
  }
}

JavaScript部分：

const slider = document.querySelector('.slider');
const container = document.querySelector('.slider-container');
const images = document.querySelectorAll('.slider-container img');
const imageWidth = images[0].clientWidth;
let counter = 1;

container.style.transform = `translateX(-${imageWidth * counter}px)`;

setInterval(() => {
  container.style.transition = 'transform 0.5s ease-in-out';
  counter++;
  container.style.transform = `translateX(-${imageWidth * counter}px)`;
}, 5000);

container.addEventListener('transitionend', () => {
  if (images[counter].id === 'last-clone') {
    container.style.transition = 'none';
    counter = images.length - 2;
    container.style.transform = `translateX(-${imageWidth * counter}px)`;
  }

  if (images[counter].id === 'first-clone') {
    container.style.transition = 'none';
    counter = images.length - counter;
    container.style.transform = `translateX(-${imageWidth * counter}px)`;
  }
});

方法二：使用CSS Grid布局和JavaScript实现

HTML部分：

<div class="slider">
  <div class="slider-container">
    <img src="image-1.jpg">
    <img src="image-2.jpg">
    <img src="image-3.jpg">
    <img src="image-4.jpg">
  </div>
</div>

CSS部分：

.slider {
  width: 100%;
  overflow: hidden;
}

.slider-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  width: 400%;
  animation: slide 10s infinite linear;
}

.slider-container img {
  width: 100%;
  height: auto;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-25%);
  }
  55% {
    transform: translateX(-25%);
  }
  60% {
    transform: translateX(-50%);
  }
  85% {
    transform: translateX(-50%);
  }
  90% {
    transform: translateX(-75%);
  }
  100% {
    transform: translateX(-75%);
  }
}

JavaScript部分同方法一。

方法三：使用jQuery实现

HTML部分：

<div class="slider">
  <div class="slider-container">
    <img src="image-1.jpg">
    <img src="image-2.jpg">
    <img src="image-3.jpg">
    <img src="image-4.jpg">
  </div>
</div>

CSS部分同方法一。

jQuery部分：

const container = $('.slider-container');
const images = $('.slider-container img');
const imageWidth = images.eq(0).width();
let counter = 1;

container.css('transform', `translateX(-${imageWidth * counter}px)`);

setInterval(() => {
  container.css('transition', 'transform 0.5s ease-in-out');
  counter++;
  container.css('transform', `translateX(-${imageWidth * counter}px)`);
}, 5000);

container.on('transitionend', () => {
  if (images.eq(counter).attr('id') === 'last-clone') {
    container.css('transition', 'none');
    counter = images.length - 2;
    container.css('transform', `translateX(-${imageWidth * counter}px)`);
  }

  if (images.eq(counter).attr('id') === 'first-clone') {
    container.css('transition', 'none');
    counter = images.length - counter;
    container.css('transform', `translateX(-${imageWidth * counter}px)`);
  }
});