用自己的运动函数写的轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
.carousel {
position: relative;
width: 600px;
height: 400px;
margin: 0 auto;
overflow: hidden;
}
ul.imgList {
position: absolute;
width: 4200px;
height: 400px;
}
ul.imgList li {
float: left;
}
.btns {
width: 600px;
height: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
}
.btns .leftBtn {
float: left;
}
.btns .rightBtn {
float: right;
}
.btns span {
width: 40px;
line-height: 100px;
text-align: center;
font-size: 30px;
color: white;
cursor: pointer;
}
.cirList {
position: absolute;
bottom: 10px;
left: 140px;
right: 140px;
height: 30px;
display: flex;
justify-content: space-evenly;
}
.cirList li {
width: 20px;
height: 20px;
background-color: orange;
border-radius: 50%;
cursor: pointer;
}
.cirList li.active {
background-color: red;
}
</style>
</head>
<body>
<div id="carousel" class="carousel">
<ul class="imgList">
<li><img src="images/1.jpeg" /></li>
<li><img src="images/2.jpeg" /></li>
<li><img src="images/3.jpeg" /></li>
<li><img src="images/4.jpeg" /></li>
<li><img src="images/5.jpeg" /></li>
<li><img src="images/6.jpeg" /></li>
<li><img src="images/1.jpeg" /></li>
</ul>
<div class="btns">
<span class="leftBtn"><</span>
<span class="rightBtn">></span>
</div>
<ul class="cirList">
<li></li>
<li></li>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="../qf.js"></script>
<script>
var carousel = document.querySelector("#carousel");
var rightBtn = document.querySelector('.rightBtn');
var leftBtn = document.querySelector('.leftBtn');
var imgList = document.querySelector(".imgList");
var listLength = imgList.querySelectorAll("li").length;
var cirListAll = Array.from(document.querySelectorAll(".cirList li"));
var count = 0;
var flag = true;
change();
function rightHandler() {
if (!flag) {
return;
}
flag = false;
count++;
console.log(count);
QF.animation(imgList, {
left: -count * 600
}, 1000, function() {
if (count >= listLength - 1) {
imgList.style.left = 0;
count = 0;
}
flag = true;
})
change();
}
rightBtn.addEventListener('click', rightHandler)
leftBtn.addEventListener('click', function() {
if (!flag) {
return;
}
count--;
flag = false;
if (count < 0) {
count = listLength - 1;
imgList.style.left = -count * 600 + 'px';
count--;
}
QF.animation(imgList, {
left: -count * 600
}, 1000, function() {
flag = true;
})
change();
})
function change() {
cirListAll.forEach((item, index) => {
item.className = ''
})
if (count === listLength - 1) {
cirListAll[0].className = 'active'
} else {
cirListAll[count].className = 'active'
}
}
cirListAll.forEach((item, index) => {
item.onclick = function() {
count = index;
QF.animation(imgList, {
left: -count * 600
}, 1000, function() {
flag = true;
})
change();
}
})
let timer = setInterval(function() {
rightHandler();
}, 2000);
carousel.onmouseenter = function() {
clearInterval(timer);
}
carousel.onmouseleave = function() {
timer = setInterval(function() {
rightHandler();
}, 2000);
}
</script>
</body>
</html>