<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.all {
margin-left: 10%;
}
.show {
width: 86%;
height: 650px;
margin-left: 20px;
margin-top: 20px;
overflow: hidden;
position: relative;
}
.print {
display: flex;
width: 800%;
transition: all 0.5s;
}
.dots {
display: flex;
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.dot {
width: 15px;
height: 15px;
margin-left: 13px;
border-radius: 10px;
background-color: honeydew;
cursor: pointer;
}
.dot.active {
background-color: pink;
}
.print img {
width: 100%;
height: 650px;
object-fit: cover;
}
#direction {
width: 100%;
height: 5vh;
position: absolute;
top: 45%;
display: flex;
}
#direction div {
width: 3%;
height: 5vh;
text-align: center;
border-radius: 10px;
line-height: 5vh;
font-size: 16px;
background-color: rgba(0, 0, 0, 0.2);
color: #fff;
overflow: hidden;
cursor: pointer;
}
.two {
margin-left: 94%;
}
</style>
</head>
<body>
<div class="all">
<div class="show">
<div class="print"></div>
<div class="dots"></div>
<div id="direction">
<div onclick="prev()">⬅</div>
<div class="two" onclick="next()">➡</div>
</div>
</div>
</div>
<script>
// 获取数据
// 存储从JSON文件读取的数据
let data;
// 获取class为'all'的第一个元素
let big = document.getElementsByClassName('all')[0];
// 初始化索引变量，用于记录当前显示的图片索引
let index = 0;
// 获取class为'dots'的元素，用于插入小圆点
let dotContainer = document.querySelector('.dots');
// 获取class为'print'的元素，用于插入图片
let print = document.querySelector('.print');
// 存储所有的小圆点元素
let dots = [];
// 创建XMLHttpRequest对象，用于发送HTTP请求
let xhr = new XMLHttpRequest();
// 配置HTTP请求，从'js/lunbo.json'获取数据，异步请求
xhr.open('get', 'js/lunbo.json', true);
// 发送HTTP请求
xhr.send();
// 监听XHR对象的状态变化
xhr.onreadystatechange = function() {
// 确认请求已完成且成功
if (xhr.readyState == 4 && xhr.status == 200) {
// 获取响应数据（JSON格式的字符串）
let text = xhr.responseText;
// 将JSON字符串解析为JavaScript对象
data = JSON.parse(text);
// 获取数据后调用renderer函数渲染轮播图
renderer(data);
}
};
// 渲染轮播图
function renderer(data) {
// 用于存储构建图片标签的字符串
let str = '';
// 用于存储构建小圆点的字符串
let dotStr = '';
// 循环遍历数据的长度
for (let i = 0; i < data.length; i++) {
// 构建图片标签，data[i].path是图片路径
str += `<img src="${data[i].path}" alt="" />`;
// 构建小圆点，点击调用control函数
dotStr += `<div class="dot" onclick="control(${i})"></div>`;
}
// 添加第一张图片到最后，实现无缝轮播
str += `<img src="${data[0].path}" alt="" />`;
// 将图片标签插入到print元素中
print.innerHTML = str;
// 将小圆点插入到dotContainer元素中
dotContainer.innerHTML = dotStr;
// 获取所有的小圆点元素
dots = document.querySelectorAll('.dot');
// 将第一个小圆点设为激活状态
dots[0].classList.add('active');
}
// 定时器，控制自动轮播
let time = setInterval(function() {
// 切换到下一张图片
next();
// 每隔3秒调用next函数
}, 3000);
// 下一张
function next() {
// 索引加一，显示下一张图片
index++;
// 移动轮播图
moveSlide();
}
// 上一张
function prev() {
// 索引减一，显示上一张图片
index--;
// 移动轮播图
moveSlide();
}
// 控制显示特定图片
function control(i) {
// 设置索引为i，显示特定的图片
index = i;
// 移动轮播图
moveSlide();
}
// 移动轮播图
function moveSlide() {
// 处理超出范围的情况
if (index > data.length) {
// 去除过渡效果
print.style.transition = "none";
// 将margin-left设为0%，显示第一张图片
print.style.marginLeft = "0%";
// 索引设为0
index = 0;
setTimeout(function() {
// 0.5秒的过渡效果
print.style.transition = "margin-left 0.5s";
// 索引加一
index++;
// 移动到下一张图片
print.style.marginLeft = `-${index * 100}%`;
// 等待20毫秒再执行过渡效果，避免立即执行过渡效果造成闪烁
}, 20);
// 处理负数的情况
} else if (index < 0) {
// 去除过渡效果
print.style.transition = "none";
// 索引设为最后一张图片的索引
index = data.length - 1;
// 移动到最后一张图片
print.style.marginLeft = `-${index * 100}%`;
setTimeout(function() {
// 0.5秒的过渡效果
print.style.transition = "margin-left 0.5s";
// 等待20毫秒再执行过渡效果，避免立即执行过渡效果造成闪烁
}, 20);
// 正常情况下的移动
} else {
// 0.5秒的过渡效果
print.style.transition = "margin-left 0.5s";
// 根据索引移动到对应的图片
print.style.marginLeft = `-${index * 100}%`;
}
// 更新小圆点状态
updateDots();
}
// 更新小圆点状态
function updateDots() {
// 遍历所有的小圆点
dots.forEach(function(dot, i) {
// 遍历所有的小圆点
let actualIndex = index % data.length;
if (i === actualIndex) {
// 激活当前图片对应的小圆点
dot.classList.add('active');
} else {
// 移除其他小圆点的激活状态
dot.classList.remove('active');
}
});
}
// 鼠标悬停暂停自动轮播
big.onmouseover = function() {
// 清除定时器，停止自动轮播
clearInterval(time);
}
big.onmouseout = function() {
// 清除定时器，停止自动轮播
clearInterval(time);
time = setInterval(function() {
// 每隔3秒调用next函数，继续自动轮播
next();
}, 3000);
}
</script>
</body>
</html>
