基于JavaScript实现classroom轮播图效果

华为云博客 技术博客 17817 20

今天日常浏览华为云时，寻思着云学院的classroom的动态轮播图挺好看的，闲来无事模仿一下，之前也做过类似的轮播，这里算是巩固一下知识吧。此效果运用了动画+控制点绑定事件，还添加了计时器，延迟自动下一张banner。话不多说，上效果图。

html代码：

<body>
  <div class="page">
    <div class="box" id="swiper-box">
      <!-- 轮播图html部分 -->
    </div>
    <div class="swiper-pagination-box" id="pagination-box">
    </div>
  </div>
</body>

css代码：

<style>
    * {
      margin: 0;
      padding: 0;
    }

    .page {
      width: 100%;
      overflow: hidden;
      position: relative;
    }

    .box {
      transition: all 0.5s;
      position: relative;
      left: 0;
    }

    /* //轮播图css样式部分 */

    .box img {
      width: 100vw;
      height: 100%;
      float: left;
    }

    .swiper-pagination-box {
      height: 30px;
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translate(-50%, 0);
      z-index: 3;
      display: flex;
    }

    .swiper-pagination-item {
      height: 8px;
      width: 8px;
      border-radius: 4px;
      background: rgba(0, 0, 0, .4);
      margin: 11px 5px;
      transition: all 0.3s;
    }

    .swiper-pagination-item-active {
      padding: 0 10px;
      background: #5E7CE0;
    }
  </style>

重点来说说js的代码

这里初始化轮播图的index和计算器timer，然后添加一个常量数组，存放了4张banner图片。

script type="text/javascript">
    /*轮播图javascript部分*/
    const box = document.getElementById('swiper-box')
    const paginationBox = document.getElementById('pagination-box')
    let nowIndex = 0; //当前的轮播图index
    let timer = null; //计时器
    const swiperData = [
      { imgurl: 'https://classroom.devcloud.huaweicloud.com/KV-1.d496dac2e01a2f29ef36.png' },
      { imgurl: 'https://classroom.devcloud.huaweicloud.com/KV-3.c93386044625bf888759.png' },
      { imgurl: 'https://classroom.devcloud.huaweicloud.com/KV-2.baeadc40378c8355fdd3.png' },
      { imgurl: 'https://classroom.devcloud.huaweicloud.com/KV-4.4e963885af14af72bd9f.png' }
  
    ]

接着 设置轮播图容器的宽度

    box.style.width = `${parseInt(swiperData.length+1) *100}vw`;

然后再添加轮播图，进行遍历


    function addSwiper() {
      for (let i in swiperData) {
        const img = document.createElement("img");
        img.src = swiperData[i].imgurl;
        box.appendChild(img);
        const sapn = document.createElement("span");
        sapn.classList.add("swiper-pagination-item");
        if (i == 0) {
          sapn.classList.add("swiper-pagination-item-active");
        }
        paginationBox.appendChild(sapn);
      }

接着在图片的最后添加第一张图，以至当循环到最后一张时会继续跳到第一张继续

 const img = document.createElement("img");
      img.src = swiperData[0].imgurl;
      box.appendChild(img);
    }

这里获取控制点，然后进行自动播放banner

 addSwiper();
    const paginationItems = document.querySelectorAll(".swiper-pagination-box .swiper-pagination-item")
    function autoplay() {
      timer = setInterval(() => {
        changeSwiperItem()
      }, 5000)
    }
    autoplay()

接着再写图片移动，根据index来移动图片。然后先清除动画，再把图片移到第一张上

function changeSwiperItem() {
      const swiperItems = document.querySelectorAll(".box img")
      if (nowIndex + 1 == swiperData.length) {
        box.style.left = `-${(nowIndex+1) *100}vw`;
        nowIndex = 0;
        setTimeout(() => {
          box.style.transition = "0s"
          box.style.left = `-0vw`;
        }, 600)
      } else {
        box.style.transition = "all 0.5s"
        box.style.left = `-${(nowIndex +1) *100}vw`;
        nowIndex++;
      }

      delClass()
      paginationItems[nowIndex].className = 'swiper-pagination-item swiper-pagination-item-active';
    }

最后清除样式，再给每个控制点绑定事件就欧克了。


    function delClass() {
      for (let i in paginationItems) {
        paginationItems[i].className = 'swiper-pagination-item';
      }
    }

    function paginationItemClick() {
      for (let i in paginationItems) {
        paginationItems[i].onclick = function () {
          delClass()
          this.className = 'swiper-pagination-item swiper-pagination-item-active';
          nowIndex = parseInt(i);
          clearInterval(timer)
          box.style.transition = "all 0.5s"
          box.style.left = `-${(nowIndex) *100}vw`;
          autoplay()
        }
      }
    }
    paginationItemClick()

整体流程就是这样的，是不是很(斯国一)?

附上详细完整代码。

（完）