css轮播图 左右键 小圆点 左右滑动代码

好的，以下是一个基本的 CSS 轮播图的 HTML 和 CSS 代码示例，它包括左右箭头按钮、小圆点和左右滑动功能：

HTML 代码：

<div class="slideshow-container">
  <div class="slide">
    <img src="slide1.jpg">
  </div>
  <div class="slide">
    <img src="slide2.jpg">
  </div>
  <div class="slide">
    <img src="slide3.jpg">
  </div>
  <a class="prev">&#10094;</a>
  <a class="next">&#10095;</a>
  <div class="dots-container">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

CSS 代码：

/* 轮播图容器 */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* 图片轮播 */
.slide {
  display: none;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* 显示第一张图片 */
.slide:first-child {
  display: block;
}

/* 左右箭头样式 */
.prev, .next {
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 30px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  cursor: pointer;
}

/* 右箭头位置 */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* 当鼠标悬停时，箭头变为半透明 */
.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* 小圆点容器 */
.dots-container {
  text-align: center;
  padding: 20px;
  background: #ddd;
}

/* 小圆点样式 */
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #bbb;
  margin: 0 5px;
  cursor: pointer;
}

/* 显示当前图片的小圆点 */
.active {
  background-color: #717171;
}

/* 左右滑动效果 */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

这段代码中的 `slide` 类用于设置每个幻灯片的样式，`prev` 和 `next` 类用于设置左右箭头按钮的样式，`dots-container` 类用于设置小圆点的样式。鼠标点击左右箭头或小圆点时，使用 JavaScript 代码来触发幻灯片的左右滑动效果。