轮播图实现——使用css3的方式

这里采用的 vue 的编写方式

思路：本来是三张图片，复制第一张还有第三张；但是第三张切换成第一张的时候，先切换到 “第四张” （即第一张的复印），然后快速切换到原有的第一张，左滑同理！

.self-i {
  border: 2px solid rgb(221, 221, 221);
  border-width: 0 0.1rem 0.1rem 0;
  display: none;
  padding: 0.15rem;
  z-index: 99;
}

.self-i:hover {
  border-color: gray;
  cursor: pointer;
}

.right {
  position: absolute;
  top: 2.2rem;
  right: 0.5rem;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  position: absolute;
  top: 2.2rem;
  left: 0.5rem;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.home-swiper {
  width: 100%;
  height: 5.2rem;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  background-color: pink;
  overflow: hidden;
  position: relative;
}

.home-swiper:hover .self-i {
  display: inline-block;
}

.carousel {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  
  display: flex;
  transition: 0.5s;
}

.carousel img {
  width: 15.12rem;
  height: 100%;
}

.indicator {
  position: absolute;
  bottom: 0.3rem;
  left: 50%;
  transform: translateX(-50%);
  
  
  display: flex;
  
}

.indicator span {
  width: 0.2rem;
  height: 0.2rem;
  border: 1px solid #ccc;
  border-radius: 50%;
  margin: 0 0.05rem;
}

.indicator span:hover {
  cursor: pointer;
}

.indicator span.active {
  background-color: #fff;
  background-color: #fff;
}

getSwiper(index) {
      // console.log('当前的值为：' + index)
      var doms = {
        carousel: document.querySelector('.carousel'),
        indicators: document.querySelectorAll('.indicator span'),
      }
      if (index > 2) {
        doms.carousel.style.transform = `translateX(-400%)`
        // 下面就是快速切换的部分
        setTimeout(() => {
          doms.carousel.style.transition = 'none'
          doms.carousel.style.transform = `translateX(-100%)`
        }, 500)
        index = 0
      } else {
        if (index < 0) {
          doms.carousel.style.transform = `translateX(0%)`
          setTimeout(() => {
            doms.carousel.style.transition = 'none'
            doms.carousel.style.transform = `translateX(-300%)`
          }, 500)
          // 减去的值
          index = 2
        } else {
          doms.carousel.style.transform = `translateX(-${index + 1}00%)` // 这里再跳转
        }
      }
      doms.carousel.style.transition = '0.5s'
      var active = document.querySelector('.indicator span.active')
      active.classList.remove('active')
      this.spanNum = index
      doms.indicators[index].classList.add('active')
    },

——————
如内有不足，
多多指教！