<!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;
}
the {
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: "Times New Roman";
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: "Times New Roman";
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";
},
Volume ENTER: 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>