!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" titleDocument/title style * { margin: 0; padding: 0; } .hezi { w
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" ></li> <li><img src="img/2.jpg" ></li> <li><img src="img/3.jpg" ></li> <li><img src="img/4.jpg" ></li> <li><img src="img/5.jpg" ></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>