js加css制作轮播图

可以使用HTML、CSS和JavaScript来制作轮播图。其中，HTML用于搭建轮播图的基本结构，CSS用于美化轮播图的样式，JavaScript用于实现轮播图的动态效果。以下是一个简单的轮播图的HTML、CSS和JavaScript代码示例：

HTML代码：

<div class="slider">
  <div class="slides">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
</div>

CSS代码：

.slider {
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.slides {
  display: flex;
  width: 300%;
  height: 100%;
}

.slides img {
  width: 33.333%;
  height: 100%;
  object-fit: cover;
}

JavaScript代码：

const slider = document.querySelector('.slider');
const slides = document.querySelector('.slides');
const images = document.querySelectorAll('.slides img');

let counter = 1;
const size = images[0].clientWidth;

slides.style.transform = 'translateX(' + (-size * counter) + 'px)';

setInterval(() => {
  slides.style.transition = 'transform 0.5s ease-in-out';
  counter++;
  slides.style.transform = 'translateX(' + (-size * counter) + 'px)';
}, 3000);

slides.addEventListener('transitionend', () => {
  if (images[counter].id === 'lastClone') {
    slides.style.transition = 'none';
    counter = images.length - 2;
    slides.style.transform = 'translateX(' + (-size * counter) + 'px)';
  }
  if (images[counter].id === 'firstClone') {
    slides.style.transition = 'none';
    counter = images.length - counter;
    slides.style.transform = 'translateX(' + (-size * counter) + 'px)';
  }
});

这段代码实现了一个基本的轮播图，每隔3秒钟自动切换一张图片。你可以根据自己的需求修改HTML、CSS和JavaScript代码来实现更加复杂的轮播图效果。