JS轮播图
html+css代码
<!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: 41000px;
height: 400px;
}
ul.imgList li {
float: left;
}
.btns {
/* display: none; */
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%;
}
.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 class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="animate.js"></script>
<script>
// 1 获取元素
let rightBtn = document.querySelector(".rightBtn");
let leftBtn = document.querySelector(".leftBtn");
let imgList = document.querySelector('.imgList');
let listLength = imgList.getElementsByTagName("li").length;
let cirs = Array.from(document.querySelectorAll(".cirList li"));
let carousel = document.getElementById('carousel');
// 2 添加事件
// 设定一个信号量 累计鼠标点了右按钮几次
let count = 0;
// 设置一把锁
let lock = true;
let rightHandler = () => {
// 判断
if (!lock) {
return;
}
// 当为真时 下面的代码会被执行 执行过程中 应当不允许点击第二次
lock = false;
// 点一次就加一次
count++;
// 将ul元素 向左移动1个图片的距离
animate(imgList, { left: -600 * count }, 1000, () => {
// 判断是否到最后的猫腻图了
if (count >= listLength - 1) {
console.log("到了最后那张猫腻图");
// 将定位拉回0
imgList.style.left = 0;
// 将count归0
count = 0;
}
// 每次动画结束 都要开锁
lock = true;
});
change();
}
rightBtn.addEventListener("click", rightHandler);
// 左按钮点击事件
leftBtn.addEventListener("click", () => {
if (!lock) {
return;
}
lock = false;
// 当点击左按钮的时候 让count--
count--;
// 判断count是否合法
if (count < 0) {
// 修正count值
count = listLength - 1;
// 将imgList直接拽到猫腻图那
imgList.style.left = -count * 600 + "px";
count--;
}
animate(imgList, {left: count * -600}, 1000, function() {
lock = true;
});
change();
});
// 小圆点按钮 要有点击事件
cirs.forEach(function(value, index) {
value.addEventListener("click", function() {
if (!lock) {
return;
}
lock = false;
// 切换图片 其实就是让imgList运动到对应的图片 就是修改count
count = index;
animate(imgList, {left: count * -600}, 1000, function() {
lock = true;
});
// 小圆点更换样式
change();
});
});
// 封装一个函数
function change() {
// 清空所有的小圆点样式
cirs.forEach(function(value) {
value.className = "";
});
// 单独给count对应的小圆点添加
// if (count === listLength - 1) {
// cirs[0].className = "active";
// } else {
// cirs[count].className = "active";
// }
// 简化
let a = count === listLength - 1 ? 0 : count;
cirs[a].className = "active";
}
// 自动轮播
let timer = setInterval(function() {
rightHandler();
}, 10000);
// 绑定鼠标进入事件
carousel.addEventListener("mouseenter", function() {
clearInterval(timer);
console.log(leftBtn.parentNode)
leftBtn.parentNode.style.display = "block";
});
// 绑定鼠标离开事件
carousel.addEventListener("mouseleave", function() {
leftBtn.parentNode.style.display = "none";
timer = setInterval(function() {
rightHandler();
}, 10000);
});
</script>
</body>
</html>
JS代码
function animate(ele, obj, duration, callback) {
// 定义一个固定的时间间隔
let interval = 20;
// 知道起点
let startObj = {};
for (let i in obj) {
startObj[i] = parseInt(getComputedStyle(ele)[i]);
}
// 知道总次数
let allCount = duration / interval;
// 定义变量记录次数
let count = 0;
let timer = setInterval(function () {
count++;
// 循环改变元素的属性
for (let i in obj) {
let result = startObj[i] + (obj[i] - startObj[i]) / allCount * count;
ele.style[i] = (i.toLowerCase() === "opacity") ? result : (result + "px");
}
// 停止
if (count >= allCount) {
clearInterval(timer);
callback && callback(); // 等价于 if (callback) {callback()}
}
}, interval)
}