面向对象-轮播图

最新推荐文章于 2024-07-30 10:56:44 发布
开心很重要
最新推荐文章于 2024-07-30 10:56:44 发布
阅读量174
点赞数
文章标签： css3 css javascript
本文链接：https://blog.csdn.net/Black_Straight/article/details/125134761
版权
文章目录

一、面向对象-轮播图
一、面向对象-轮播图

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Document</title>
  </head>
  <style>
    * {
      padding: 0;
      margin: 0;
      list-style: none;
      text-decoration: none;
    }
    .banner {
      width: 500px;
      height: 300px;
      border: 1px solid #000;
      position: relative;
      margin: 20px auto;
    }
    .banner ul li a img {
      width: 500px;
      height: 300px;
    }
    .banner ul li {
      display: none;
    }
    .banner ul li.active {
      display: block;
    }
    .banner ol {
      width: 60px;
      height: 20px;
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 10px;
      position: absolute;
      left: 50%;
      bottom: 10px;
      transform: translateX(-50%);
    }
    .banner ol li {
      width: 10px;
      height: 10px;
      background-color: skyblue;
      border-radius: 50%;
      float: left;
      margin: 5px;
    }
    .banner ol li.active {
      background-color: #f00;
    }
    .banner > a {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 40px;
      background-color: rgba(10, 10, 10, 0.5);
      text-align: center;
      line-height: 40px;
      color: #fff;
      font-weight: bold;
      font-size: 20px;
    }
    .banner > a.left {
      left: 0;
    }
    .banner > a.right {
      right: 0;
    }
    .goods {
      width: 500px;
      height: 300px;
      border: 1px solid #000;
      position: relative;
      margin: 20px auto;
    }
    .goods ul li a img {
      width: 500px;
      height: 300px;
    }
    .goods ul li {
      display: none;
    }
    .goods ul li.active {
      display: block;
    }
    .goods ol {
      width: 60px;
      height: 20px;
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 10px;
      position: absolute;
      left: 50%;
      bottom: 10px;
      transform: translateX(-50%);
    }
    .goods ol li {
      width: 10px;
      height: 10px;
      background-color: skyblue;
      border-radius: 50%;
      float: left;
      margin: 5px;
    }
    .goods ol li.active {
      background-color: #f00;
    }
    .goods > a {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 40px;
      background-color: rgba(10, 10, 10, 0.5);
      text-align: center;
      line-height: 40px;
      color: #fff;
      font-weight: bold;
      font-size: 20px;
    }
    .goods > a.left {
      left: 0;
    }
    .goods > a.right {
      right: 0;
    }
  </style>
  <body>
    <div class="banner">
      <ul>
        <li class="active">
          <a href="#">
            <img src="./images/1.jpg" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/2.jpg" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/3.jpg" />
          </a>
        </li>
      </ul>
      <ol>
        <li class="active"></li>
        <li></li>
        <li></li>
      </ol>
      <a href="javascript:;" class="left"><</a>
      <a href="javascript:;" class="right">></a>
    </div>
    <div class="goods">
      <ul>
        <li class="active">
          <a href="#">
            <img src="./images/1.jpg" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/2.jpg" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/3.jpg" />
          </a>
        </li>
      </ul>
      <ol>
        <li class="active"></li>
        <li></li>
        <li></li>
      </ol>
      <a href="javascript:;" class="left"><</a>
      <a href="javascript:;" class="right">></a>
    </div>
  </body>
  <script type="text/javascript">
    // 1.创建空的构造函数
    function Carousel(classname, time) {
      // 获取所有元素
      this.box = document.querySelector("." + classname);
      this.ulis = this.box.querySelectorAll("ul li");
      this.olis = this.box.querySelectorAll("ol li");
      this.left = this.box.querySelector("a.left");
      this.right = this.box.querySelector("a.right");
      // 定义一个下标作为对象的属性
      this.index = 0;
      this.timerId = null;
      this.time = time;
      this.init();
    }
    // 创建初始化方法 - 给元素绑定事件
    Carousel.prototype.init = function () {
      this.right.onclick = () => {
        this.rightClick();
      };
      this.left.onclick = () => {
        this.leftClick();
      };
      for (let i = 0; i < this.olis.length; i++) {
        this.olis[i].onclick = () => {
          this.dotsClick(i);
        };
      }
      this.timerId = setInterval(() => {
        this.rightLunbo();
      }, this.time);
      this.box.onmouseover = () => {
        clearInterval(this.timerId);
      };
      this.box.onmouseout = () => {
        this.timerId = setInterval(() => {
          this.rightLunbo();
        }, this.time);
      };
    };
    // 定义方法 - 处理右按钮点击
    Carousel.prototype.rightClick = function () {
      this.rightLunbo();
    };

    Carousel.prototype.leftClick = function () {
      this.index--;
      if (this.index < 0) {
        this.index = this.ulis.length - 1;
      }
      this.lunbo();
    };
    Carousel.prototype.dotsClick = function (index) {
      this.index = index;
      this.lunbo();
    };
    // 轮播的核心代码
    Carousel.prototype.rightLunbo = function () {
      this.index++;
      if (this.index == this.ulis.length) {
        this.index = 0;
      }
      this.lunbo();
    };
    Carousel.prototype.lunbo = function () {
      for (var i = 0; i < this.ulis.length; i++) {
        this.ulis[i].className = "";
        this.olis[i].className = "";
      }
      this.olis[this.index].className = this.ulis[this.index].className =
        "active";
    };
    // 2.new
    var c = new Carousel("banner", 2000);
    // c.init()

    var g = new Carousel("goods", 1000);
    // g.init()
  </script>
</html>