<!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="../js/move.js"></script>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.lunbo {
width: 650px;
height: 360px;
border: 1px solid #000;
margin: 0 auto;
position: relative;
margin-top: 50px;
}
.lunbo ul li {
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
.lunbo img {
width: 650px;
height: 360px;
display: block;
}
.lunbo ol {
position: absolute;
left: 280px;
bottom: 20px;
}
.lunbo ol li {
width: 10px;
height: 10px;
border: 2px solid #000;
border-radius: 50%;
margin-right: 5px;
float: left;
cursor: pointer;
}
.lunbo ol li.active {
background-color: orangered;
}
.left,
.right {
font-size: 60px;
color: #fff;
text-decoration: none;
position: absolute;
top: 50%;
margin-top: -30px;
}
.left {
left: 25px;
}
.right {
right: 25px;
}
</style>
</head>
<body>
<div class="lunbo">
<ul>
<li style="opacity: 1;"><img src="../images/1.jpg" alt=""></li>
<li><img src="../images/2.jpg" alt=""></li>
<li><img src="../images/3.jpg" alt=""></li>
<li><img src="../images/4.jpg" alt=""></li>
<li><img src="../images/5.jpg" alt=""></li>
</ul>
<ol>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<a href="javascript:;" class="left"><</a>
<a href="javascript:;" class="right">></a>
</div>
</body>
<script>
function LunBo() {
this.LunBo = document.querySelector('.lunbo')
this.oImg = document.querySelectorAll('.lunbo ul li');//图片
this.oBtn = document.querySelectorAll('.lunbo ol li');//按钮
this.leftBtn = document.querySelector('.left');//左按钮
this.rightBtn = document.querySelector('.right');//右按钮
this.index = 0;
}
LunBo.prototype.init = function () {
// console.log(999);
let _this = this;
for (let i = 0; i < _this.oBtn.length; i++) {
this.oBtn[i].onmouseover = function () {
_this.index = i;
_this.fn();
}
}
this.rightBtn.onclick = function () {
// console.log(666);
_this.index++;
if (_this.index > _this.oImg.length - 1) {
_this.index = 0;
}
_this.fn();
}
this.leftBtn.onclick = function () {
_this.index--;
if (_this.index < 0) {
_this.index = _this.oImg.length - 1;
}
_this.fn();
}
//自动轮播
_this.selfMotion()
//停止轮播
_this.LunBo.onmouseover = function () {
clearInterval(_this.oImg.time);
console.log(666);
}
//继续轮播
_this.LunBo.onmouseout = function () {
_this.selfMotion()
}
}
//自动轮播
LunBo.prototype.selfMotion = function () {
this.oImg.time = setInterval(() => {
this.rightBtn.onclick();
}, 2000)
}
LunBo.prototype.fn = function () {
let _this = this;
for (let j = 0; j < _this.oBtn.length; j++) {
_this.oBtn[j].className = '';
// _this.oImg[j].style.opacity = 0;
bufferMove(_this.oImg[j], { opacity: 0 });
}
_this.oBtn[_this.index].className = 'active';
// _this.oImg[_this.index].style.opacity = 1;
bufferMove(_this.oImg[_this.index], { opacity: 100 });
}
new LunBo().init();
</script>
</html>``
面向对象 -- 轮播图
最新推荐文章于 2024-07-30 22:36:34 发布