Js实现无缝轮播
<!DOCTYPE html>
<html lang="zh">
<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>轮播图2</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="main">
<ul class="imgList">
<li class="img"></li>
<li class="img"></li>
<li class="img"></li>
<li class="img"></li>
<li class="img"></li>
</ul>
<ul class="imgMin">
<!-- data-* 属性用于存储私有页面后应用的自定义数据 -->
<li class="min" data-n="0"></li>
<li class="min" data-n="1"></li>
<li class="min" data-n="2"></li>
<li class="min" data-n="3"></li>
<li class="min" data-n="4"></li>
</ul>
<div class="button">
<div class="left">
<i class="fa fa-angle-left" aria-hidden="true"></i>
</div>
<div class="right">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</div>
</div>
</div>
<script src="./js/toggle.js"></script>
</body>
</html>
Css：
*{
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: green;
}
.main{
width: 800px;
height: 400px;
overflow: hidden;
cursor: pointer;
position: absolute;
background-color: #02020236;
box-shadow: 20px 30px 20px rgba(0, 0, 0, 0.5); /* 边框阴影*/
}
.main .imgList{
left: 0;
height: 100%;
width: 4800px;
display: flex;
position: absolute;
transition: 0.8s ease;
}
.main .imgList .img{
width: 100%;
background-size: 100% 100%;
}
.main .imgList .img:nth-child(1){
width: 100%;
background-image: url("../img/1.jpg");
}
.main .imgList .img:nth-child(2){
background-image: url("../img/2.jpg");
}
.main .imgList .img:nth-child(3){
background-image: url("../img/3.jpg");
}
.main .imgList .img:nth-child(4){
background-image: url("../img/4.jpg");
}
.main .imgList .img:nth-child(5){
background-image: url("../img/5.jpg");
}
.main .imgList .img:nth-child(6){
background-image: url("../img/1.jpg");
}
.main .imgMin{
display: flex;
width: 20%;
height: 40px;
bottom: 0;
left: 40%;
/* 均匀排列每个元素，每个元素之间的间隔相等 */
justify-content: space-evenly;
align-items: center;
position: absolute;
/* background-color: red; */
}
.main .imgMin .min{
width: 20px;
height: 20px;
z-index: 999;
cursor: pointer;
border-radius: 50%;
background-color: #ffffffd6;
}
.main .imgMin .min.active{
background-color: #e74c3c;
}
.main .button{
display: flex;
height: 100%;
width: 100%;
position: absolute;
justify-content: space-between;
}
.main .button .left, .right{
width: 50px;
z-index: 999;
cursor: pointer;
font-size: 50px;
color: #ffffff45;
text-align: center;
line-height: 400px;
transition: 0.8s ease;
background-color: #79797940;
}
Js：
let main = document.querySelector(".main")
let oleft = document.querySelector(".left")
let oRight = document.querySelector(".right")
let imgList = document.querySelector(".imgList")
let imgMin = document.querySelector(".imgMin")
let min = document.querySelectorAll(".min")
/* 复制 ul 的第一个节点 克隆第一个li */
let clonefirstImg = imgList.firstElementChild.cloneNode();
/* 将第一个张图片添加至图片列表的末尾 */
imgList.appendChild(clonefirstImg);
/* 图片索引 */
index = 0; /* 第一张图*/
/* 页面加载后后执行这个函数 */
setMin();
/* 右按钮点击事件 */
oRight.addEventListener('click', () => {
handleRightBtn();
})
/* 左按钮点击事件 */
oleft.addEventListener('click', () => {
if (lock === false) {
return;
}else {
index--;
/* 如果下面的锁没有过800毫秒 不执行这个判断 */
if (index === -1) {
index = 4;
/* 加载最后张假图 */
imgList.style.left = 5 * -800 + "px";
imgList.style.transition = "none";
/* 把最后张假图替换为第一张图 */
setTimeout(() => {
imgList.style.left = index * -800 + "px";
imgList.style.transition = "0.8s ease";
}, 0)
}else{
imgList.style.left = index * -800 + "px";
}
/* 点击左按钮执行这个函数 */
setMin();
}
// if(!lock) return;
/* 关锁 */
lock = false;
/* 800毫秒后开锁 */
setTimeout(() => {
lock = true;
},800) /* 800毫秒后设置lock等于true*/
})
/* 点击左右按钮后小圆点高亮显示 定义一个setMin()函数*/
function setMin() {
/* 遍历获取5个小圆点 */
//遍历： for循环遍历
for(let i = 0; i < min.length; i++){
if(i === index){
/* 条件满足时 当前li上添加 active 这个类*/
min[i].classList.add("active");
}else {
/* 不满足条件的li上移除 active 这个类*/
min[i].classList.remove("active");
}
}
}
/* 点击小圆点切换图片 */
imgMin.addEventListener('click', (e) => {
// console.log(e.target)
/* e.target监听被点击的那个小圆点 */
//nodeName 点击节点的名字
//toLowerCase 把字符串转换为小写（防止出现其他元素）
// 点击到小圆点的时候要做的事情
if (e.target.nodeName.toLowerCase() === "li") {
/* 当前小圆点li和图片一一对应 */
let n = Number(e.target.getAttribute("data-n"));
index = n;
setMin();
imgList.style.left = index * -800 + "px";
imgList.style.transition = "0.8s ease";
min[n].classList.add("active");
}
})
/* 自动轮播 */
function handleRightBtn() {
if (lock === false) {
return;
}else {
index++;
/* 如果下面的锁没有过800毫秒 不执行这个判断 */
imgList.style.transition = "0.8s ease";
imgList.style.left = index * -800 + "px";
if (index === 5) {
index = 0;
/* 添加一个定时器 */
setTimeout(() =>{
imgList.style.left= 0;
/* 取消过渡 100毫秒之后切换第一张图片 */
imgList.style.transition = "none";
},800) /*当点击右侧按钮第6次 800毫秒后触发这个定时器*/
}
/* 点击右按钮执行这个函数 */
setMin();
}
// if (!lock) return;
/* 关锁 */
lock = false;
/* 500毫秒后打开这个锁 */
setTimeout(() => {
lock = true;
},800) /* 800毫秒后设置lock等于true*/
}
/* 定时轮播 定时执行这个函数：handleRightBtn*/
let autoplay = setInterval(handleRightBtn, 2000);
/* 鼠标移入停止轮播 */
main.addEventListener("mouseenter", () => {
oleft.style.width = "50px";
oRight.style.width = "50px";
oleft.style.visibility = "visible";
oRight.style.visibility = "visible";
/* 清除定时器 */
clearInterval(autoplay);
})
/* 鼠标移出开始轮播 */
main.addEventListener("mouseleave", () => {
oleft.style.width = "0px";
oRight.style.width = "0px";
oRight.style.visibility = "hidden";
oleft.style.visibility = "hidden";
/* 清除定时器(防止鼠标快速移入移出导致定时器异常) */
clearInterval(autoplay);
/* 再继续轮播 */
autoplay = setInterval(handleRightBtn, 2000);
})
/* 设置一个函数节流锁 连续点击左右按钮后在设置的的时间内再执行按钮点击事件*/
let lock = true;
浙公网安备 33010602011771号