JS实现轮播图

今天给大家介绍下怎么用 JS 实现轮播图效果。原理描述：设置好盒子的大小，将所有的图片脱离文档流叠放在一起，通过 querySelectorAll 获取所有的图片循环遍历，由 display 来控制图片的显示与隐藏(先隐藏所有的图片当轮播到当前图片时再显示)效果：代码：<!DOCTYPE html><html lang="en"><head><meta c

xingnan.

8219人浏览 · 2022-03-08 10:00:00

xingnan. · 2022-03-08 10:00:00 发布

今天给大家介绍下怎么用 JS 实现轮播图效果。

原理描述：

设置好盒子的大小，将所有的图片脱离文档流叠放在一起，通过 querySelectorAll 获取所有的图片循环遍历，由 display 来控制图片的显示与隐藏(先隐藏所有的图片当轮播到当前图片时再显示)

效果：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>轮播图</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 566px;
      height: 333px;
      overflow: hidden;
      margin: 100px auto;
      position: relative;
    }

    .box>img {
      width: 566px;
      height: 333px;
    }

    ul {
      position: absolute;
      list-style: none;
      overflow: hidden;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
    }

    li {
      float: left;
      width: 10px;
      height: 10px;
      background-color: papayawhip;
      border-radius: 50%;
      color: powderblue;
      margin-left: 10px;
    }
  </style>
</head>

<body>
  <div class="box">
    <img src="./imgs/bg1.jpg" alt="">
    <img src="./imgs/bg3.jpg" alt="">
    <img src="./imgs/bg4.jpg" alt="">
    <img src="./imgs/bg5.jpg" alt="">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>
<script>
  var imgs = document.querySelectorAll(".box img");//获取到所有图片
  var btn = document.querySelectorAll(".box li");//获取小圆点
  var num = 0;
  btn[num].style.backgroundColor = "red";
  var timer = setInterval(roll, 2000)
  function roll() {
    num++;
    num >= imgs.length ? num = 0 : num = num;
    imgs.forEach((item, index) => {
      item.style.display = 'none'
      btn[index].style.background = 'papayawhip'

    })
    imgs[num].style.display = 'block' //显示相对应的图片
    btn[num].style.background = 'red'
  }



  btn.forEach(function (item, index) {
    item.onmouseenter = function () {
      clearInterval(timer)
      num = index - 1
      roll()
    }
    item.onmouseleave = function () {
      timer = setInterval(roll, 2000)
    }
  })
</script>

</html>