js面向对象-轮播源码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>轮播-对象</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .banner {
      position: relative;
      /* overflow: hidden; */
    }

    img {
      width: 100%;
      height: 800px;
      vertical-align: top;
      opacity: 0;
    }

    .banner>.banner-img>img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 800px;
      transition: 1s;
    }

    img.active {
      opacity: 1;
    }

    button {
      position: absolute;
      top: 50%;
      margin-top: -25px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      font-size: 32px;
      color: #fff;
      background: rgba(200, 198, 198, 0.6);
      border: none;
      cursor: pointer;
    }

    .banner>button:active {
      background: rgba(0, 0, 0, .8);
    }

    button:nth-of-type(1) {
      left: 50px;
    }

    button:nth-of-type(2) {
      right: 50px;
    }

    .banner ul {
      position: absolute;
      left: 50%;
      bottom: 50px;
      width: 100px;
      margin-left: -50px;
      text-align: center;
    }

    .banner>ul>li {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      cursor: pointer;
      background: skyblue;
      display: inline-block;
    }

    .banner>ul>li.active {
      background: #fff;
    }
  </style>
</head>

<body>
  <div class="banner">
    <div class="banner-img">
      <img class="active" src="../image/y2.jfif" alt="">
      <img src="../image/y3.jfif" alt="">
      <img src="../image/y4.jfif" alt="">
      <img src="../image/y5.jfif" alt="">
      <img src="../image/4.jpg" alt="">
      <img src="../image/5.jpg" alt="">
    </div>
    <img src="../image/5.jpg" alt="">
    <button>
      < </button>
        <button>></button>
        <ul>
          <li a="0" class="active"></li>
          <li a="1"></li>
          <li a="2"></li>
          <li a="3"></li>
          <li a="4"></li>
          <li a="5"></li>
        </ul>
  </div>
  <div class="banner">
    <div class="banner-img">
      <img class="active" src="../image/y2.jfif" alt="">
      <img src="../image/y3.jfif" alt="">
      <img src="../image/y4.jfif" alt="">
      <img src="../image/y5.jfif" alt="">
      <img src="../image/4.jpg" alt="">
      <img src="../image/5.jpg" alt="">
    </div>
    <img src="../image/5.jpg" alt="">
    <button>
      < </button>
        <button>></button>
        <ul>
          <li a="0" class="active"></li>
          <li a="1"></li>
          <li a="2"></li>
          <li a="3"></li>
          <li a="4"></li>
          <li a="5"></li>
        </ul>
  </div>

  <script>
    // var banner = document.getElementsByClassName('banner')[0];
    // console.log(banner);
    function carousel(a) {
      this.a = a;
      // console.log(a);
      // this.banner = a.getElementsByClassName('banner')[0];
      this.btns = a.getElementsByTagName('button');
      // console.log(this.btns);
      this.imgs = a.getElementsByTagName('img');
      // console.log(this.imgs);
      this.lis = a.getElementsByTagName('li');
      // console.log(this.lis);
      this.j = 0;
      // console.log(this.j);
      this.timer = null;
    }

    carousel.prototype.init = function () {
      this.bind();
      this.clock();
    }

    carousel.prototype.bind = function () {
      var obj = this;
      console.log(this);
      console.log(this.j);
      for (var i = 0; i < this.btns.length; i++) {
        this.btns[i].onclick = function () {
          if (this.innerText == ">") {
            obj.animation(1);
          } else {
            obj.animation(-1);
          }
        }
      }
      for (var i = 0; i < this.lis.length; i++) {
        this.lis[i].onclick = function () {
          obj.animation(0, this);
        }
      }
      obj.a.onmouseover = function () {
        obj.clock();
      }
      obj.a.onmouseout = function () {
        obj.clock();
      }
    }

    carousel.prototype.animation = function (num, li) {
      this.clear();
      this.calcJ(num, li);
      this.lis[this.j].className = 'active';
      this.imgs[this.j].className = 'active';
    }

    carousel.prototype.clear = function (li) {
      for (var i = 0; i < this.lis.length; i++) {
        this.lis[i].className = '';
        this.imgs[i].className = '';
      }
    }

    carousel.prototype.calcJ = function (num, li) {
      if (num) {
        this.j += num;
        if (this.j == this.lis.length) {
          this.j = 0;
        } else if (this.j == -1) {
          this.j = this.lis.length - 1;
        }
      } else {
        this.j = parseInt(li.getAttribute('a'));
        console.log(this.j);
      }
    }

    carousel.prototype.clock = function () {
      var obj = this;
      if (this.timer == null) {
        this.timer = setInterval(function () {
          obj.animation(1);
        }, 2000)
      } else {
        clearInterval(this.timer);
        this.timer = null;
      }
    }

    var banners = document.getElementsByClassName("banner");
    var div1 = banners[0];
    // console.log(div1);

    var div2 = banners[1];
    // console.log(div2);

    var banners1 = new carousel(div1);
    banners1.init();
    var banners2 = new carousel(div2);
    banners2.init();


  </script>

</body>

</html>