用CSS写一个带箭头和圆点的轮播图代码

以下是一个简单的带箭头和圆点的轮播图代码示例，你可以根据需要进行修改：

HTML代码：

<div class="slider">
  <div class="slide">
    <img src="image1.jpg">
  </div>
  <div class="slide">
    <img src="image2.jpg">
  </div>
  <div class="slide">
    <img src="image3.jpg">
  </div>
  <div class="slide">
    <img src="image4.jpg">
  </div>
  <a class="prev" href="#">&#10094;</a>
  <a class="next" href="#">&#10095;</a>
  <div class="dots">
    <span class="dot active"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

CSS代码：

.slider {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.slide.active {
  opacity: 1;
}
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 16px;
  color: white;
  font-size: 24px;
  font-weight: bold;
  transition: background-color 0.3s ease-in-out;
  z-index: 2;
}
.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.prev {
  left: 0;
}
.next {
  right: 0;
}
.dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}
.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: white;
  margin: 0 8px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}
.dot.active {
  background-color: rgba(255, 255, 255, 0.7);
}

JavaScript代码：

var slides = document.querySelectorAll('.slide');
var dots = document.querySelectorAll('.dot');
var prevBtn = document.querySelector('.prev');
var nextBtn = document.querySelector('.next');
var slideIndex = 0;

function showSlide(index) {
  if (index < 0) {
    index = slides.length - 1;
  } else if (index >= slides.length) {
    index = 0;
  }
  
  for (var i = 0; i < slides.length; i++) {
    slides[i].classList.remove('active');
  }
  
  slides[index].classList.add('active');
  
  for (var i = 0; i < dots.length; i++) {
    dots[i].classList.remove('active');
  }
  
  dots[index].classList.add('active');
}

function prevSlide() {
  slideIndex--;
  showSlide(slideIndex);
}

function nextSlide() {
  slideIndex++;
  showSlide(slideIndex);
}

function dotSlide() {
  var dotIndex = Array.from(dots).indexOf(this);
  slideIndex = dotIndex;
  showSlide(slideIndex);
}

prevBtn.addEventListener('click', prevSlide);
nextBtn.addEventListener('click', nextSlide);

for (var i = 0; i < dots.length; i++) {
  dots[i].addEventListener('click', dotSlide);
}

showSlide(slideIndex);