JS实现轮播图

最新推荐文章于 2024-06-17 15:29:34 发布

xingnan.

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量8.2k

点赞数 5

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

本文链接：https://blog.csdn.net/qq_39035580/article/details/123341628

版权

案例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天给大家介绍下怎么用 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>

xingnan.

关注

5
点赞
踩
30

收藏

觉得还不错? 一键收藏
1
评论
JS实现轮播图

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

扫一扫

专栏目录