css实现带箭头和圆点的轮播图的代码

以下是一个简单的CSS实现带箭头和圆点的轮播图的代码示例：

HTML代码：

<div class="slider-container">
  <div class="slider">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <div class="slider-navigation">
    <span class="slider-prev">&#8249;</span>
    <span class="slider-next">&#8250;</span>
    <div class="slider-dots">
      <span class="slider-dot"></span>
      <span class="slider-dot"></span>
      <span class="slider-dot"></span>
    </div>
  </div>
</div>

CSS代码：

.slider-container {
  position: relative;
  overflow: hidden;
}

.slider {
  display: flex;
  transition: transform 0.3s ease-in-out;
}

.slider img {
  width: 100%;
}

.slider-navigation {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
}

.slider-prev,
.slider-next {
  font-size: 30px;
  color: #fff;
  cursor: pointer;
}

.slider-dots {
  display: flex;
  align-items: center;
}

.slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  margin: 0 5px;
  cursor: pointer;
}

.slider-dot.active {
  background-color: #ff6600;
}

/* 当前图片的样式 */
.slider img:nth-child(1) {
  transform: translateX(0%);
}

/* 箭头样式 */
.slider-prev:hover,
.slider-next:hover {
  color: #ff6600;
}

/* 点击箭头切换图片 */
.slider-prev:hover ~ .slider img,
.slider-prev:focus ~ .slider img {
  transform: translateX(100%);
}

.slider-next:hover ~ .slider img,
.slider-next:focus ~ .slider img {
  transform: translateX(-100%);
}

/* 点击圆点切换图片 */
.slider-dot:hover,
.slider-dot:focus {
  background-color: #ff6600;
}

.slider-dot:nth-child(1):hover ~ .slider img,
.slider-dot:nth-child(1):focus ~ .slider img {
  transform: translateX(0%);
}

.slider-dot:nth-child(2):hover ~ .slider img,
.slider-dot:nth-child(2):focus ~ .slider img {
  transform: translateX(-100%);
}

.slider-dot:nth-child(3):hover ~ .slider img,
.slider-dot:nth-child(3):focus ~ .slider img {
  transform: translateX(-200%);
}

上述代码中，我们使用了flexbox来实现图片的水平排列和导航按钮的对齐。我们还使用了CSS3过渡效果来实现图片的滑动切换，并使用伪类选择器和相邻兄弟选择器来实现箭头和圆点的交互效果。