当前位置：首页 > article >正文

前端：轮播图常见的几种实现方式

article 2025/1/4 22:34:37

目录

前言

一、轮播图是什么？

二、实现方法

1.使用纯 HTML、CSS、JavaScript 实现

2.使用组件来快速实现

总结

前言

在学习前端的过程中，总是有要实现轮播图效果的时候，本文就介绍了轮播图常见的几种实现方式。

一、轮播图是什么？

轮播图是在首页上展示信息的一种方式，为了让用户不用滚动屏幕就能看到更多内容，可以利用轮播图来最大化信息密度。

二、实现方法

1.使用纯 HTML、CSS、JavaScript 实现

HTML代码如下：

<div class="carousel">
    <img src="./assets/banner1.png" alt="">
    <span class="pre">&lt;</span>
    <span class="next">&gt;</span>
</div>

CSS代码如下：

    * {
      padding: 0;
      margin: 0;
    }
    
    /* 轮播图 */
    .carousel {
      position: relative;
      margin: 100px auto;
      width: 1240px;
      height: 500px;
    }

    /* 左右切换箭头 */
    .pre,
    .next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 40px;
      background-color: rgba(0, 0, 0, 0.3);
      text-align: center;
      line-height: 40px;
      color: #fff;
      opacity: 0;
      transition: all 0.3s;
      cursor: pointer;
    }

    .pre {
      left: 0;
      border-radius: 0 20px 20px 0;
    }

    .next {
      right: 0;
      border-radius: 20px 0 0 20px;
    }

    .carousel:hover .pre,
    .carousel:hover .next {
      opacity: 1;
    }

JS代码如下：

    /**
     * 轮播图实现的基本流程
     * 1.数据准备 --- 遍历数组来实现轮播效果
     * 2.获取对象
     * 3.自动播放 --- 用定时器实现
     * 4.当鼠标悬停在轮播图上面时，停止自动轮播 --- 销毁定时器
     * 5.当鼠标离开时，开始自动轮播 --- 重新开启定时器
     * 6.点击左右箭头时，进行图片的切换 --- 用事件委托来实现
    */
    // 1.数据准备 --- 遍历数组来实现轮播效果
    const imageUrls = ['./assets/banner1.png', './assets/banner2.png', './assets/banner3.png', './assets/banner4.png', './assets/banner5.png']
    let i = 0

    // 2.获取对象
    const carousel = document.querySelector('.carousel')
    const img = document.querySelector('img')

    // 3.自动播放 --- 用定时器实现
    let timer = setInterval(() => {
      i += 1
      i %= 5

      img.src = imageUrls[i]
    }, 3000);

    // 4.当鼠标悬停在轮播图上面时，停止自动轮播 --- 销毁定时器
    carousel.addEventListener('mouseenter', () => {
      clearInterval(timer)
    })

    // 5.当鼠标离开时，开始自动轮播 --- 重新开启定时器
    carousel.addEventListener('mouseleave', () => {
      timer = setInterval(() => {
        i += 1
        i %= 5

        img.src = imageUrls[i]
      }, 3000);
    })

    // 6.点击左右箭头时，进行图片的切换 --- 用事件委托来实现
    carousel.addEventListener('click', (e) => {
      // 判断所点击的是左箭头，还是右箭头
      if (e.target.classList.contains('pre')) {
        i += 4
        i %= 5

        img.src = imageUrls[i]
      }
      if (e.target.classList.contains('next')) {
        i += 1
        i %= 5

        img.src = imageUrls[i]
      }
    })

在以上代码中，首先是准备好了结构和样式，并且数据是存在数组里的，这样方便后续做图片的自动播放以及手动切换。

自动播放主要是用定时器来实现，手动切换则是运用了事件委托，具体流程也在上面的代码中进行了比较清晰的注释，有兴趣的话可以看一下。