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

手写轮播图

这里采用的 vue 的编写方式

一、效果展示

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

二、相应的代码部分

1.HTML

<div class="home-swiper">
        <i class="right self-i" @click="getSwiper(spanNum + 1)"></i>
        <i class="left self-i" @click="getSwiper(spanNum - 1)"></i>
        <div class="carousel">
          <div class="item">
            <router-link to="/notice"
              ><img src="../../assets/images/pic3.jpg" alt="" srcset=""
            /></router-link>
          </div>
          <div class="item">
            <router-link to="/notice"
              ><img src="../../assets/images/pic1.jpg" alt="" srcset=""
            /></router-link>
          </div>
          <div class="item">
            <router-link to="/notice"
              ><img src="../../assets/images/pic2.jpg" alt="" srcset=""
            /></router-link>
          </div>
          <div class="item">
            <router-link to="/notice"
              ><img src="../../assets/images/pic3.jpg" alt="" srcset=""
            /></router-link>
          </div>
          <div class="item">
            <router-link to="/notice"
              ><img src="../../assets/images/pic1.jpg" alt="" srcset=""
            /></router-link>
          </div>
        </div>
        <div class="indicator">
          <span class="active" @click="getSwiper(0)"></span>
          <span @click="getSwiper(1)"></span>
          <span @click="getSwiper(2)"></span>
        </div>
      </div>

2.css

.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;
  /* background-color: skyblue; */
  display: flex;
  transition: 0.5s;
}

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

.indicator {
  position: absolute;
  bottom: 0.3rem;
  left: 50%;
  transform: translateX(-50%);
  /* width: 1rem;
  height: 0.5rem; */
  /* background-color: skyblue; */
  display: flex;
  /* outline: 1px solid #fff; */
}

.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;
}

3.js

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')
    },

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