<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
}
.box {
width: 400px;
height: 300px;
margin: 40px auto;
position: relative;
overflow: hidden;
background-color: #ddd;
}
img {
width: 400px;
height: 300px;
}
.box ul {
width: 2000px;
height: 300px;
position: absolute;
left: 0;
top: 0;
display: flex;
}
.box ul li {
width: 400px;
height: 300px;
text-align: center;
line-height: 300px;
font-size: 40px;
font-weight: bold;
border: 1px solid #000;
}
.box ol {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
}
.box ol li {
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #f00;
margin: 10px;
}
.on {
background-color: #f00;
}
p {
position: absolute;
width: 30px;
height: 30px;
top: 0;
bottom: 0;
margin: auto;
background-color: pink;
}
#prev {
left: 0;
}
#next {
right: 0;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>1</li>
</ul>
<p id="prev"><</p>
<p id="next">></p>
<ol>
<li class="on"></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<script>
// 大轮播和小move之间的时间差
// 无缝滚动
// 尾巴上复制第一张
// 最后一张小move结束之后，大轮播开始之前 ， index=0 , oUl=0
// 定时器是异步的
// 离开页面一段时间，轮播图会挂
// window.onlur window.onfocus
// 防止点击过快 --- 防抖和节流
// 上下翻页和小圆点
// 事情没有结束之前不触发事件
// forEach 方法 i可以保留
var oUl = document.querySelector("ul");
var oOlLis = document.querySelectorAll("ol li");
var prev = document.querySelector("#prev");
var next = document.querySelector("#next");
// move(oUl , -1600 , 20 , ‘left‘)
var index = 0; // 播放第几张图
var bigTimer; // 控制自动播放
var flag; // 点击过快的问题
// 大定时器 时间要足够长
// 离开页面一段时间，轮播图会挂
autoplay();
window.onblur = function () {
clearInterval(bigTimer);
};
window.onfocus = function () {
autoplay();
};
oUl.onmouseover = () => {
clearInterval(bigTimer);
};
oUl.onmouseout=()=>{
autoplay()
}
prev.onmouseover = () => {
clearInterval(bigTimer);
console.log(11);
};
next.onmouseover = () => {
clearInterval(bigTimer);
console.log(11);
};
// 点击对应的小圆点，显示对应的角标
oOlLis.forEach(function (val, i) {
val.onclick = function () {
// 不能点击自己
if (flag && i !== index) {
clearInterval(bigTimer);
index = i;
dot();
move(oUl, -400 * index, 20, "left", function () {
// 小运动和大定时器之间的时间差
if (index == 4) {
index = 0;
oUl.style.left = 0;
}
});
// 不点了，或者鼠标移出 继续播放
autoplay();
}
};
});
// 防抖和节流 --- 为了解决事件处理函数高频率触发的问题
// 如果move函数没有执行完毕就不允许点击
prev.onclick = function () {
if (flag) {
clearInterval(bigTimer);
if (index == 0) {
index = 4;
oUl.style.left = -index * 400 + "px";
}
index--;
dot();
move(oUl, -400 * index, 20, "left", function () {
// 小运动和大定时器之间的时间差
if (index == 4) {
index = 0;
oUl.style.left = 0;
}
});
autoplay();
}
};
next.onclick = function () {
if (flag) {
clearInterval(bigTimer);
index++;
dot();
move(oUl, -400 * index, 20, "left", function () {
// 小运动和大定时器之间的时间差
if (index == 4) {
index = 0;
oUl.style.left = 0;
}
});
autoplay();
}
};
function autoplay() {
clearInterval(bigTimer);
bigTimer = setInterval(function () {
index++;
move(oUl, -400 * index, 20, "left", function () {
// 小运动和大定时器之间的时间差
if (index == 4) {
index = 0;
oUl.style.left = 0;
}
});
dot();
}, 1500);
}
//删除小圆圈的自带的红色背景
function dot() {
for (var i = 0; i < oOlLis.length; i++) {
oOlLis[i].classList.remove("on");
}
// 第一张图实际上是最后一张，最后一张显示第0个点
if (index == 4) {
oOlLis[0].classList.add("on");
} else{oOlLis[index].classList.add("on")};
}
//运动的盒子的
function move(ele, end, speed, property, cb) {
flag = false;
var start = parseInt(getStyle(ele, property));
speed = start - end > 0 ? -speed : speed;
var t = setInterval(function () {
start += speed;
ele.style[property] = start + "px";
if (Math.abs(start - end) < Math.abs(speed)) {
clearInterval(t);
start = end;
ele.style[property] = start + "px";
flag = true;
cb && cb();
}
}, 10);
}
//获取移动的盒子的元素的样式
function getStyle(ele, property) {
if (window.getComputedStyle) {
return getComputedStyle(ele)[property];
}
return ele.currentStyle[property];
}
</script>
</body>
</html>
