面向对象原生js轮播图

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
  margin: 0;
  padding: 0;
}
.hezi {
  width: 500px;
  height: 300px;
  padding: 10px;
  margin: 100px auto;
  position: relative;
}
#tupian {
  width: 500px;
  height: 300px;
  position: relative;
  overflow: hidden;
}
ul {
  width: 500px;
  height: 300px;
  position: absolute;
}
#tupian ul li {
  list-style: none;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: all 0.8s;
}
.btnBox {
  width: 500px;
  height: 50px;
  position: absolute;
  left: 10px;
  top: 75px;
}
#leftBtn {
  position: absolute;
  left: 0;
  top: 0;
  width: 25px;
  height: 50px;
  background-color: #ccc;
  text-align: center;
  line-height: 50px;
  font-size: 50px;
  font-family: "宋体";
  color: #fff;
  text-decoration: none;
}
#rightBtn {
  position: absolute;
  right: 0;
  top: 0;
  width: 25px;
  height: 50px;
  background-color: #ccc;
  text-align: center;
  line-height: 50px;
  font-family: "宋体";
  font-size: 50px;
  color: #fff;
  text-decoration: none;
}
#tupian ol {
  width: 125px;
  height: 15px;
  position: absolute;
  z-index: 100;
  right: 10px;
  bottom: 5px;
}
#tupian ol li {
  width: 10px;
  height: 10px;
  padding: 5px;
  background-color: #fff;
  text-align: center;
  line-height: 10px;
  list-style: none;
  margin-right: 5px;
  float: left;
}
#tupian ol li.cur {
  background-color: yellow;
}
</style>
</head>
<body>
<div class="hezi" id="hezi">
  <div id="tupian">
    <ul>
      <li style="opacity:1;"><img src="img/1.jpg" alt=""></li>
      <li><img src="img/2.jpg" alt=""></li>
      <li><img src="img/3.jpg" alt=""></li>
      <li><img src="img/4.jpg" alt=""></li>
      <li><img src="img/5.jpg" alt=""></li>
    </ul>
    <ol>
      <li class="cur">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ol>
  </div>
  <div class="btnBox">
    <a href="javascript:void(0);" id="leftBtn">
    <</a>
    <a href="javascript:;" id="rightBtn">>
    </a>
  </div>
</div>
</body>
<script>
  function Zhuanzhaun(bigEle, smilEle, l, r) {
    this.hezi = document.getElementById(bigEle);
    this.tupian = document.getElementById(smilEle);
    this.ul = tupian.children[0];
    this.ulLiArr = this.ul.children;
    this.ol = tupian.children[1];
    this.olLiArr = this.ol.children;
    this.leftBtn = document.getElementById(l);
    this.rightBtn = document.getElementById(r);
    this.k = 0;
    this.timer = null;
    this.init();
  }
  Zhuanzhaun.prototype = {
    init: function () {
    this.autoplay();
    this.bindRClick();
    this.bindOver();
    this.dianji();
    this.bindEnter();
    this.bindOut();
  },
  autoplay: function () {
    this.timer = setInterval(() => {
      this.autostep();
    }, 2000)
  },
  autostep: function () {
    this.k++;
    if (this.k > 4) {
      this.k = 0;
    }
    for (var i = 0; i < this.ulLiArr.length; i++) {
      this.ulLiArr[i].style.opacity = 0;
      this.olLiArr[i].className = "";
    }
    this.ulLiArr[this.k].style.opacity = 1;
    this.olLiArr[this.k].className = "cur";
  },
  bindEnter: function () {
    var that = this;
    this.hezi.onmouseenter = function () {
      clearInterval(that.timer);
    }
  },
  bindOut: function () {
    var that = this;
    this.hezi.onmouseleave = function () {
      that.autoplay();
    }
  },
  autostep1: function () {
    var _this = this;
    this.k--;
    if (this.k < 0) {
      this.k = 4;
    }
    for (var i = 0; i < _this.ulLiArr.length; i++) {
      _this.ulLiArr[i].style.opacity = 0;
      _this.olLiArr[i].className = "";
    }
    _this.ulLiArr[this.k].style.opacity = 1;
    _this.olLiArr[this.k].className = "cur";
  },
 
    dianji: function () {
      var that = this
      this.leftBtn.onclick = function () {
      that.autostep1();
    }
  },
  bindClick: function () {
    var that = this;
    this.leftBtn.onclick = function () {
    that.k--;
    that.autostep();
    if (that.k < 0) {
      that.k = 4;
    }
    for (var i = 0; i < that.ulLiArr.length; i++) {
      that.ulLiArr[i].style.opacity = 0;
      that.olLiArr[i].className = "";
    }
    that.ulLiArr[that.k].style.opacity = 1;
    that.olLiArr[that.k].className = "cur";
    }
  },
  bindRClick: function () {
    var that = this;
    this.rightBtn.onclick = function () {
      that.autostep();
    }
  },
  bindOver: function () {
    var that = this;
    for (var i = 0; i < this.olLiArr.length; i++) {
    this.olLiArr[i].onmouseover = function () {
      for (var j = 0; j < that.olLiArr.length; j++) {
        that.olLiArr[j].className = "";
        that.ulLiArr[j].style.opacity = 0;
        if (this == that.olLiArr[j]) {
          that.k = j;
          that.ulLiArr[that.k].style.opacity = 1;
          this.className = "cur";
         }
       }
     }
    }
   }
  }
new Zhuanzhaun("hezi","tupian","leftBtn","rightBtn");
</script>
</html>
上一篇:BZOJ 2019 [Usaco2009 Nov]找工作:spfa【最长路】【判正环】


下一篇:跨域的根本原因:JavaScript 的同源策略