使用js完成轮播图，自动播放，左右切换，底部圆点点击跳转，鼠标悬停

最新推荐文章于 2025-02-22 18:45:28 发布

原创最新推荐文章于 2025-02-22 18:45:28 发布 · 851 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css3 #前端

html css js jq 专栏收录该内容

36 篇文章

订阅专栏

这篇博客详细介绍了如何使用JavaScript实现一个自动播放、左右切换、底部圆点导航的轮播图。通过设置定时器实现自动轮播，监听鼠标悬停事件控制播放暂停，点击底部圆点可以跳转到对应图片。示例代码中包含了HTML结构、CSS样式和JavaScript逻辑，适合前端开发者学习参考。

使用js完成轮播图，自动播放，左右切换，底部圆点点击跳转，鼠标悬停

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    #box {
      width: 480px;
      position: relative;
      margin: 0 auto;
    }
    img {
      position: absolute;
      width: 480px;
      height: 270px;
      color: #ffffff;
    }
    .text {
      position: absolute;

      left: calc(50% - 65px);
      top: 240px;
      text-align: center;
      z-index: 999;
    }
    .monx {
      float: left;
      width: 20px;
      height: 20px;
      background-color: rgba(255, 245, 244, 0.3);
      margin-left: 4px;
      border: 1px solid #464646;
    }
    .active {
      background: red;
    }
    #left {
      background: rgb(114, 110, 110);
      width: 30px;
      height: 50px;
      position: absolute;
      left: 10px;
      top: 110px;
      line-height: 50px;
    }
    #right {
      background: rgb(156, 147, 147);
      width: 30px;
      height: 50px;
      position: absolute;
      right: 10px;
      top: 110px;
      line-height: 50px;
      text-align: center;
    }
  </style>
  <body>
    <div id="box">
      <div class="img"><img src="./img/1.jpg" alt="" /></div>
      <div class="img"><img src="./img/2.jpg" alt="" /></div>
      <div class="img"><img src="./img/3.jpg" alt="" /></div>
      <div class="img"><img src="./img/2.jpg" alt="" /></div>
      <div class="img"><img src="./img/3.jpg" alt="" /></div>

      <div class="text">
        <span class="monx active">1</span>
        <span class="monx">2</span>
        <span class="monx">3</span>
        <span class="monx">4</span>
        <span class="monx">5</span>
      </div>

      <span id="left">《</span>
      <span id="right">》</span>
    </div>
  </body>
  <script>
    var img = document.getElementsByClassName("img"); //获取所有轮播图
    var box = document.getElementById("box");
    var monx = document.getElementsByClassName("monx");
    var left = document.getElementById("left");
    var right = document.getElementById("right");
    // 定义一个变量表示当前要显示和图片下标，
    var index = 0;
    //定义一个定时器
    var indetId;

    //样式重置函数
    function clean() {
      for (var i = 0; i < img.length; i++) {
        //全部隐藏
        index = index % 5;
        img[i].style.display = "none";
          //重置样式
        monx[i].className = "monx";
      }
      //当前图片显示
      img[index].style.display = "block";
      //当前下标添加样式
      monx[index].className = "monx active";
    }

    goTime();
    //自动播放
    function goTime() {
      indetId = setInterval(function () {
        index++;
        clean();
        //判断是否到最后一个
      }, 1000);
    }
    //点击对应数字切换对应图片

    for (var i = 0; i < monx.length; i++) {
      monx[i].index = i;
      monx[i].onclick = function () {
        index = this.index;
        //调用样式还原函数
        clean();
      };
    }
    //点击左边
    left.onclick = function () {
      index--;
      //如果下标到了第一个就跳转最后一个
      if (index < 0) {
        index = monx.length - 1;
      }
      //调用样式还原函数
      clean();
    };

    //点击右边
    right.onclick = function () {
      index++;
      //如果下标到了最后一个就跳转到第一个
      if (index == monx.length) {
        index = 0;
      }
      //调用样式还原函数
      clean();
    };

    box.onmouseover = function () {
      // 清除定时器
      clearInterval(indetId);
    };

    box.onmouseout = function () {
      // 移出再加上定时器
      goTime();
    };
  </script>
</html>