面向对象轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./startMove.js"></script>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
.ban{
width: 500px;
height: 300px;
border: 1px solid pink;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.ban .list{
width: 700%;
height: 300px;
background-color: rgb(205, 182, 50);
position: absolute;
left: -500px;
}
.ban .list li{
box-sizing: border-box;
width: 500px;
height: 300px;
border: 1px solid black;
float: left;
font-size: 100px;
text-align: center;
line-height: 300px;
font-weight: bolder;
}
.ban .cri{
position: absolute;
bottom: 10px;
left: 300px;
}
.ban .cri li{
width: 10px;
height: 10px;
background-color: gray;
border-radius: 100%;
float: left;
margin-right: 10px;
}
.ban .cri .active{
background-color: red;
}
.ban span{
width: 20px;
height: 20px;
background-color: gray;
font-size: 16px;
position: absolute;
text-align: center;
}
.ban .left{
top: 50%;
left: 1px;
}
.ban .right{
top: 50%;
right: 1px;
}
</style>
<script>
window.onload = function(){
function ban(){
this.oBan = document.querySelector(".ban");
this.oUl = document.querySelector(".ban .list");
this.aBtns = document.querySelectorAll(".ban .cri li");
this.oSpan = document.querySelectorAll(".ban span");
this.iNow = 1;
this.timer = null;
this.tab();
this.btn();
this.list();
this.auto();
}
ban.prototype.list=function(){
for (var i = 0; i < this.aBtns.length; i++) {
this.aBtns[i].index = i;
var that = this;
this.aBtns[i].onclick = function () {
that.iNow = this.index + 1;
that.tab()
console.log(this)
}
}
}
ban.prototype.btn=function(){
var that = this
this.oSpan[0].onclick = function () {
that.iNow--;
that.tab()
}
this.oSpan[1].onclick = function () {
that.iNow++;
that.tab()
}
}
ban.prototype.auto=function(){
var that = this;
this.timer = setInterval(function(){
that.iNow++;
that.tab();
}, 3000);
this.oBan.onmouseenter = function () {
clearInterval(that.timer)
console.log(this)
}
this.oBan.onmouseleave = function () {
this.timer = setInterval(function(){
this.iNow++;
that.tab();
}, 2000)
}
}
ban.prototype.tab=function(){
var that = this;
startMove(this.oUl, { left: -this.iNow * 500 }, function () {
if (that.iNow == that.aBtns.length + 1) {
that.iNow = 1;
that.oUl.style.left = "-500px"
}
if (that.iNow == 0) {
that.iNow = 5;
that.oUl.style.left = -500 * 5 + "px"
}
});
for (var j = 0; j < that.aBtns.length; j++) {
that.aBtns[j].className = "";
}
if (that.iNow == that.aBtns.length + 1) {
that.aBtns[0].className = "active";
} else if (that.iNow == 0) {
that. aBtns[that.aBtns.length - 1].className = "active";
} else {
that.aBtns[that.iNow - 1].className = "active";
}
}
new ban()
// var b = new ban()
// b.tab();
// b.btn();
// b.list();
// b.auto();
}
</script>
</head>
<body>
<div class="ban">
<ul class="list">
<li>5</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>1</li>
</ul>
<ul class="cri">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<span class="left"> < </span>
<span class="right"> > </span>
</div>
</body>
</html>