面向对象原生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>