利用js和css实现banner轮播图效果

最新推荐文章于 2025-04-14 09:10:51 发布

Kritsm_(o^^o)

最新推荐文章于 2025-04-14 09:10:51 发布

阅读量329

点赞数 5

分类专栏：前端文章标签： javascript css 开发语言 html 前端

本文链接：https://blog.youkuaiyun.com/2301_76595824/article/details/146294211

版权

前端专栏收录该内容

2 篇文章

订阅专栏

一、原理讲解

轮播图的轮播效果在视觉上是图片的切换，但是实际上是两张图片在一个组件里面通过位移来实现的效果，所以轮播图的实现难点就在于如何让多张图片水平放置、如何让多张图片只显示一张、如何实现定时的轮换效果。

二、技术实现

1.如何让多张图片水平放置

解决：在css中设置banner类的属性 display：flex

display属性

而我们使用的flex的效果如下：

2.如何让多张图片只显示一张

解决：给banner_container的属性overflow设置为hidden（注意：一定要设置banner和img的大小,才能让图片更好的显示和隐藏）

overflow属性

而我们使用的hidden属性则是让超出范围的内容直接隐藏。

3.如何实现定时的轮换效果。

3.1.如何实现轮换

解决：通过给banner的属性translateX设置正负值可以让banner内的组件换成隐藏的组件，但是同时第一个组件也就被隐藏了。

translateX属性

但是我们在translate后面加上了一个X就表明是在x轴方向进行平移。

3.2.如何实现定时轮换

解决：利用js实现动态属性

<script>
    const translate = () => {
      let banner = document.querySelector('.banner'); // 获取banner元素
      let count = banner.childElementCount; // 获取banner元素的子元素个数
      let width = banner.querySelector('img').clientWidth;  // 获取banner元素的子元素的宽度
      let index = 0;
      setInterval(() => {
        index = (index + 1) % count;  // 每次轮播，index加1，然后取余数,获取当前的图片序号
        banner.style.transform = `translateX(-${index * width}px)`; // 将banner元素的transform属性设置为负数，实现轮播
      }, 1000); // 设置轮播间隔时间
    }

    translate();
  </script>

4.完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Banner轮播图</title>


  <style>
    .banner_container{
      width: 400px;
      display: flex; 
      overflow: hidden;
    }
    .banner{
      display: flex;
    }
    .banner img{
      width: 400px;
      margin: 0;
      border: 0;
    }
  </style>
</head>
<body>
  <div class="banner_container">
    <div class="banner">
      <img src="img/v2_srf32h.png" alt="图片1">
      <img src="img/v2_srf334.png" alt="图片2">
    </div>
  </div>
  

  <script>
    const translate = () => {
      let banner = document.querySelector('.banner'); // 获取banner元素
      let count = banner.childElementCount; // 获取banner元素的子元素个数
      let width = banner.querySelector('img').clientWidth;  // 获取banner元素的子元素的宽度
      let index = 0;
      setInterval(() => {
        index = (index + 1) % count;  // 每次轮播，index加1，然后取余数,获取当前的图片序号
        banner.style.transform = `translateX(-${index * width}px)`; // 将banner元素的transform属性设置为负数，实现轮播
      }, 1000); // 设置轮播间隔时间
    }

    translate();
  </script>

</body>
</html>