css3加js制作轮播图

可以使用CSS3的动画效果和JavaScript的事件监听来制作轮播图。具体实现方法可以参考以下步骤：

1. HTML结构：使用ul和li标签来创建轮播图的图片列表，每个li标签包含一张图片。

2. CSS样式：使用CSS3的动画效果来实现图片的切换，可以使用transition或者animation属性。同时，需要设置ul和li标签的宽度和高度，以及overflow:hidden属性来隐藏超出部分的图片。

3. JavaScript代码：使用JavaScript来实现轮播图的自动播放和手动切换。可以使用setInterval函数来定时切换图片，同时使用addEventListener函数来监听鼠标事件，实现手动切换。

以下是一个简单的示例代码：

HTML结构：

<div class="slider">
  <ul class="slider-list">
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
  </ul>
</div>

CSS样式：

.slider {
  width: 600px;
  height: 400px;
  overflow: hidden;
}
.slider-list {
  width: 1800px;
  height: 400px;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.5s ease-in-out;
}
.slider-list li {
  float: left;
  width: 600px;
  height: 400px;
}

JavaScript代码：

var sliderList = document.querySelector('.slider-list');
var sliderItems = document.querySelectorAll('.slider-list li');
var currentIndex = 0;
var timer = setInterval(nextSlide, 3000);

function nextSlide() {
  currentIndex++;
  if (currentIndex >= sliderItems.length) {
    currentIndex = 0;
  }
  sliderList.style.transform = 'translateX(-' + currentIndex * 600 + 'px)';
}

function prevSlide() {
  currentIndex--;
  if (currentIndex < 0) {
    currentIndex = sliderItems.length - 1;
  }
  sliderList.style.transform = 'translateX(-' + currentIndex * 600 + 'px)';
}

var prevButton = document.querySelector('.prev-button');
var nextButton = document.querySelector('.next-button');

prevButton.addEventListener('click', prevSlide);
nextButton.addEventListener('click', nextSlide);