JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<body>
  <div class="swiper-list"></div>
</body>

CSS

/* body {
  margin: 0;
  padding: 0;
} */

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.swiper-list {
  width: 640px;
  height: 360px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* .swiper-list::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 100%;
  background: transparent;
  backdrop-filter: blur(5px);
  z-index: 10;
}
 */
 
.swiper-main {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.swiper-item {
  height: 100%;
  display: inline;
  position: absolute;
}

.swiper-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
}

.swiper-spot {
  width: 100%;
  height: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 10px;
}

.swiper-spot .spot-item {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff;
  margin-left: 10px;
}

.swiper-spot .spot-item:nth-of-type(1) {
  margin-left: 0;
}

.leftBtn {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 999;
}

.rightBtn {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 999;
}

JavaScript

function Swiper(obj) {
  this.imgArr = obj.imgArr || []
  this.retImgArr = [
    this.imgArr[this.imgArr.length - 1],
    ...this.imgArr,
    this.imgArr[0],
  ]
  this.aniTime = obj.aniTime || 1500
  this.intervalTime = obj.intervalTime + this.aniTime || 2500
  this.nowIndex = 0

  this.swiperListDom = document.getElementsByClassName("swiper-list")[0]

  this.swiperSpotDom
  this.leftBtn
  this.rightBtn
  this.mainDom

  this.moveWidth = this.swiperListDom.offsetWidth
  this.timer = null

  this.prev = Date.now()

  this.autoplay = obj.autoplay
}

Swiper.prototype = {
  init: function () {
    this.initDom()

    // 轮播单张图片li
    let li = ""
    for (let i = 0; i < this.retImgArr.length; i++) {
      li += `<li style="left: ${i * this.moveWidth}px;width: ${this.moveWidth}px" class="swiper-item"><a href="${this.retImgArr[i].url}"><img src="${this.retImgArr[i].imgPath}" alt=""></a></li>`
    }
    this.mainDom.innerHTML = li

    // 小圆点li
    let spotLi = ""
    for (let i = 0; i < this.imgArr.length; i++) {
      if (i === 0) {
        spotLi += `<li class="spot-item" style="background-color: #ff5c1f;" index=${i}></li>`
      } else {
        spotLi += `<li class="spot-item" index=${i}></li>`
      }
    }
    this.swiperSpotDom.innerHTML = spotLi

    if (this.autoplay) {
      this.timer = setInterval(
        this.nextSlider.bind(this, this.aniTime),
        this.intervalTime,
      )
    }

    // 上一张，下一张，小圆点绑定点击事件
    this.eventBind()
  },

  initDom() {
    // 轮播图片dom容器
    this.mainDom = document.createElement("ul")
    this.mainDom.className = "swiper-main"
    this.mainDom.style.width = `${this.moveWidth * (imgArr.length + 2)}px`
    this.mainDom.style.left = `${-this.moveWidth}px`
    this.swiperListDom.appendChild(this.mainDom)

    // 小圆点ul容器
    this.swiperSpotDom = document.createElement("ul")
    this.swiperSpotDom.className = "swiper-spot"
    this.swiperListDom.appendChild(this.swiperSpotDom)
    
    // 上一张按钮
    this.leftBtn =...