JavaScript 实现轮播图功能

自动轮播：图片按照设定的时间间隔自动切换，实现循环播放。
箭头控制：用户可以通过点击左右箭头手动切换图片，控制轮播的方向。
小圆点指示：在轮播图下方显示小圆点，指示当前显示的图片位置
鼠标交互：当鼠标悬停在轮播图上时，自动轮播暂停；鼠标移开后，自动轮播恢复。
HTML 结构：

<div class="banner_box" onmouseover="hover()" onmouseout="hoverout()">
<div class="banner_arrows">
<img src="./img/箭头左.png" class="left" alt="" onclick="left()"/>
<img src="./img/箭头右.png" class="right" alt="" onclick="right()"/>
</div>
<div class="banner_img">
</div>
<div class="banner_dot">
</div>
</div>


<script src="js/banner.js"></script>
AI写代码
html

这段 HTML 代码构建了轮播图的基本结构。banner_box是轮播图的容器，banner_arrows包含左右箭头图片，banner_img用于展示轮播的图片，banner_dot则是放置小圆点的区域。同时，通过onmouseover和onmouseout事件绑定了鼠标悬停和移开的函数。

css样式：
*{
margin: 0;
padding: 0;
}
.banner_box{
position: relative;
width: 48%;
margin-left: 20%;
margin-top: 5%;
background-color: aqua;
overflow: hidden;
}
.banner_arrows {
width: 100%;
height: 300px;
position: absolute;
z-index: 5;
display: flex;
justify-content: space-between;
align-items: center
}

.banner_arrows img {
width: 8%;
height: 15%;
cursor: pointer;
/* 当鼠标悬停在图片上时，显示小手 */
}
.banner_img{
width: 100%;
height: 300px;
display: flex;
}
.banner_img img{
width: 100%;
height: 300px;
float: left;
}
.banner_dot{
position: absolute;
/* background-color: brown; */
width: 25%;
height: 50px;
bottom: 0px;
left: 40%;
}
span{
background-color: pink;
float: left;
display: block;
width: 30px;
height: 30px;
margin-left: 5px;
border-radius: 50%;

}
AI写代码
css

CSS 样式主要用于设置轮播图的布局和外观。banner_box设置为相对定位，并设置了宽度、边距和背景颜色，同时overflow: hidden确保超出容器的图片部分不会显示。banner_arrows是绝对定位，位于轮播图上方，包含左右箭头图片，并设置了箭头的样式和鼠标悬停效果。banner_img使用display: flex来排列图片，banner_dot用于放置小圆点，设置了小圆点的样式和位置。

js逻辑：
let body = document.getElementsByClassName('banner_img')[0];
let round = document.getElementsByClassName('banner_dot')[0];
let bot = document.getElementsByTagName('span');
// 定时器
let inter;
// 数据
let data;
// 下标
let index = 0;
// 生成一个 XMLHttpRequest 对象
let xhr = new XMLHttpRequest();
// open（请求类型是get，请求地址：文件位置写的是json文件，请求方式是true。表示是异步
xhr.open('get', 'js/banner.json', true);
// 接着发送请求
xhr.send();
// 该方法可以定义响应执行函数，当 readyState 属性发
// 生变化时会自动调用该方法。
xhr.onreadystatechange = function() {
// ready是交互流程。5个阶段，if判断中意思是
// 交互流程是否达到第五个阶段并且状态等于200请求成功
if (xhr.readyState == 4 && xhr.status == 200) {
// 响应文本（返回的数据）
let text = xhr.responseText;
// 把返回的json数据转换，并赋值到data变量
data = JSON.parse(text);
console.log(data);
index = 0;
reader();
bot[index].style.backgroundColor = 'red';
inter = setInterval(auto, 2000);
}
};

// 渲染函数
function reader() {
let str = '';
for (let i = 0; i < data.length; i++) {
str += `
<img src="${data[i]}" alt="" />`;
}
str += `
<img src="${data[0]}" alt="" />`;
console.log(str);
let strs = '';
for (let i = 0; i < data.length; i++) {
strs += `<span></span>`;
}

round.innerHTML = strs;
body.innerHTML = str;
}
// 自动轮播
function auto() {
index++;
body.style.transition = "all 1s";
body.style.marginLeft = -index * 100 + "%";
// console.log(index);

// bot[ bot.length-1].style.backgroundColor = 'pink'
console.log(index, data.length);
if (index >= data.length) {

index = 0;
setTimeout(function() {
body.style.marginLeft = -index * 100 + "%";
body.style.transition = "none";
}, 1000)
bot[0].style.backgroundColor = 'red';
bot[bot.length - 1].style.backgroundColor = 'pink';
} else {
bot[index].style.backgroundColor = 'red';
bot[index - 1].style.backgroundColor = 'pink';
}
}
// 鼠标放置到轮播图上时
// 清除定时器
function hover() {
clearInterval(inter);
}

// 鼠标移开时
// 重新设置定时器
function hoverout() {
inter = setInterval(auto, 2000);
}

// 右箭头
function right() {
auto();
document.getElementsByClassName('right')[0].onclick = null;
setTimeout(function() {
document.getElementsByClassName('right')[0].onclick = right;
}, 1000);
}

// 左箭头
function left() {
document.getElementsByClassName('left')[0].onclick = null;
// 首先判断图片下标是否为0
if (index == 0) {
// 如果为0那就让下标等于图片的长度（最后一张）
index = data.length;
// 并将图片切换到最后一张，过渡为none
body.style.transition = "none";
body.style.marginLeft = -(data.length) * 100 + "%";
}
// 然后设一个一次性的定时器，时间短一些
setTimeout(function() {
// 下标--；
index--;
body.style.transition = "all 1s";
body.style.marginLeft = -index * 100 + "%";
// console.log(index);
bot[0].style.backgroundColor = 'pink'
console.log(index, data.length);
if (index == data.length - 1) {
bot[index].style.backgroundColor = 'red';
bot[0].style.backgroundColor = 'pink';
} else {
bot[index].style.backgroundColor = 'red';
bot[index + 1].style.backgroundColor = 'pink';
}
}, 10);
setTimeout(function() {
document.getElementsByClassName('left')[0].onclick = left;
}, 1000);
}
AI写代码
javascript
运行

代码解释
数据：从js/banner.json文件中获取图片数据，并将其解析为 JavaScript 对象。获取数据成功后，调用reader函数渲染轮播图，并设置初始的小圆点样式和启动自动轮播定时器。
渲染函数reader：遍历图片数据，生成包含图片img标签的字符串，并在最后添加一张与第一张相同的图片，用于实现无缝循环。同时，生成小圆点的span标签字符串，并将它们分别插入到banner_img和banner_dot中。
自动轮播函数auto：每次调用时，index自增，通过改变body的marginLeft属性来移动图片，实现图片的切换。当index达到图片数量时，重置index为 0，过渡效果也清除，并使用setTimeout设置一个过渡效果，实现无缝循环。同时，更新小圆点的背景颜色，指示当前显示的图片。
鼠标移动函数hover和hoverout：hover函数在鼠标悬停时清除自动轮播定时器，暂停自动轮播；hoverout函数在鼠标移开时重新启动自动轮播定时器，恢复自动轮播。
箭头控制函数right和left：right函数调用auto函数实现向右切换图片，并在切换后暂停箭头的点击事件，1 秒后恢复。（为了防止用户短时间内多次点击）left函数在点击左箭头时，先判断index是否为 0，若为 0 则将index设置为图片数量，切换到最后一张图片，然后通过setTimeout逐步切换到前一张图片，并更新小圆点的背景颜色。同样，在切换后暂停箭头的点击事件，1 秒后恢复。
通过以上代码，我们就能实现一个日常且实用好看的轮播图效果了。
————————————————
版权声明：本文为CSDN博主「好青崧」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/jht_520/article/details/147201002