轮播图：

  效果图：

  给其父元素添加相对定位 放入照片的子元素添加绝对定位 重合 给图片添加opacity为零 使用nth-child给第一个子元素添加opacity为一

css：

.banner {
    padding-top: 149px;
    width: 100%;
    height: 350px;
    z-index: -1;
}
.bg {
    position: relative;
    width: 100%;
    height: 350px;
    margin: auto;
    z-index: 1;
    cursor: pointer;
}

.bg div {
    opacity: 0;
    width: 100%;
    height: 350px;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    transition: all 1s;
}
.banner img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 350px;
    object-fit: contain;
}
.bg div:nth-child(1) {
    opacity: 1;
}
.f1 {
    background: #78c4db;
}
.f2 {
    background-color: #073c65;
}
.f3 {
    background-color: #4988e6;
}
.bg-a {
    position: absolute;
    bottom: 15px;
    left: 45%;
    width: 200px;
    height: 30px;
}
.bg-a span {
    display: inline-block;
    margin-left: 5px;
    width: 35px;
    height: 4px;
    cursor: pointer;
    background: #999;
}

   先声明俩个变量

封装一个定时器进行自动轮播 并调用  判断当图片等于图片数组下标最大值时  其下标为0 不是则index++

     由于对图片的css代码过于重复繁多 我们可以将它封装成一个函数 需要使用时 进行调动

当鼠标点击下方小方框时 进行对应的图片显示  使用num 对小方框的下标取值 赋给图片下标 使其对应

最后一步就是对我们的鼠标移除跟移入时轮播图的自动播放状态设置 bg为dom的类

完整代码：

html

 <div class="banner">
      <div class="bg">
        <div class="f1 ban"><img src="img/index/banner2.jpg" alt="" /></div>
        <div class="f2 ban"><img src="img/index/banner1.jpg" alt="" /></div>
        <div class="f3 ban"><img src="img/index/banner3.jpg" alt="" /></div>
        <ul class="bg-a">
          <span class="bg-b"></span>
          <span class="bg-b"></span>
          <span class="bg-b"></span>
        </ul>
      </div>
    </div>

js:

 var index = 0; // 存图片下标
  var item;
  var classEr = function () {
    $(".ban").css("opacity", "0");
    $(".ban").eq(index).css("opacity", "1");
    $(".bg-b").css("background", " #ccc");
    $(".bg-b").eq(index).css("background", "#fff");
  };
  // 定时器
  function avplay() {
    item = setInterval(function () {
      if (index == 2) {
        index = 0;
        classEr();
      } else {
        index++;
        classEr();
      }
    }, 2000);
  }
  avplay();
  // 点击小框更换图片
  $(".bg-b").click(function () {
    var num = $(this).index();
    index = num;
    // 输出点击查看是否获取对应的下标
    console.log(index);
    classEr();
  });
  // 鼠标移入暂停自动播放
  $(".bg").hover(
    function () {
      clearInterval(item);
    },
    // 移除开启定时器
    function () {
      avplay();
    }
  );