JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<div class="container">
  <!--  图片列表  -->
  <ul class="ul-img">
    <li class="li-img"></li>
    <li class="li-img"></li>
    <li class="li-img"></li>
    <li class="li-img"></li>
    <li class="li-img"></li>
  </ul>

  <!--  上一张、下一张按钮  -->
  <div class="prev">
    <span>&lt;</span>
  </div>
  <div class="next">
    <span>&gt;</span>
  </div>

  <!-- 数字切换按钮 -->
  <div class="num-box">
    <ul class="num-ul">
      <li data-index="0">1</li>
      <li data-index="1">2</li>
      <li data-index="2">3</li>
      <li data-index="3">4</li>
      <li data-index="4">5</li>
    </ul>
  </div>
</div>

CSS

.container {
  position: relative;
  width: 600px;
  height: 400px;
  margin: 0 auto;
  background-color: gray;
  overflow: hidden;
}

.ul-img {
  position: absolute;
  display: flex;
  width: 4200px;
  height: 400px;
  left: 0;
  padding: 0;
  margin: 0;
}

.li-img {
  list-style: none;
  width: 600px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* 上一张、下一张 */
.prev,
.next {
  position: absolute;
  height: 400px;
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

.prev span,
.next span {
  display: block;
  color: #fff;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  cursor: pointer;
}

/* 数字切换按钮 */
.num-box {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 0);
  z-index: 2;
}

.num-ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.num-ul li {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 9px;
  color: #fff;
  margin: 0 4px;
  cursor: pointer;
  user-select: none;
}

JavaScript

const imgs = [
  "https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/imgied0v0dgsgyqeoh7804b0ca54buj0qd.jpg",
  "https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/imge39twvhffwemdsipqncbwko5vayrxgd.jpg",
  "https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/img1u6qw3ad64bz8nsedrd2wddgrax5wew.jpg",
  "https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/imgodr8vukcwco0h34p0ngc84462vs454j.jpg",
  "https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/img735yqkuspzfqxatav0t55gipvv1zzh2.jpg",
];

// 获取元素节点
const containerDom = document.getElementsByClassName("container")[0];
const ulDom = document.getElementsByClassName("ul-img")[0];
const prevDom = document.getElementsByClassName("prev")[0].firstElementChild;
const nextDom = document.getElementsByClassName("next")[0].firstElementChild;
const numUlDom = document.getElementsByClassName("num-ul")[0];
const numList = numUlDom.getElementsByTagName("li");
const liElements = document.querySelectorAll(".li-img");

// 初始化图片内容
liElements.forEach((li, index) => {
  li.style.backgroundImage = `url(${imgs[index]})`;
});

// 定义状态变量
let currentIndex = 0; // 当前索引
let timer = null;

// 初始化按钮样式
updateNumList();

// 添加事件监听
prevDom.addEventListener("click", prevFun);
nextDom.addEventListener("click", nextFun);
containerDom.addEventListener("mouseenter", stopAutoPlay);
containerDom.addEventListener("mouseleave", autoPlay);
numUlDom.addEventListener("click", numClick);

// 自动播放
autoPlay();

// 上一张
function prevFun() {
  if (currentIndex === 0) {
    jumpToEnd(() => {
      currentIndex = imgs.length - 1; // 更新索引
      switchImage();
    });
  } else {
    currentIndex--;
    switchImage();
  }
}

// 下一张
function nextFun() {
  if (currentIndex === imgs.length - 1) {
    jumpToStart(() => {
      currentIndex = 0; // 更新索引
      switchImage();
    });
  } else {
    currentIndex++;
    switchImage();
  }
}

// 数字按钮点击事件
function numClick(e) {
  const index =...