JavaScript轮播图实现
这个代码创建了一个简单的轮播图，可以通过点击左右箭头或自动播放来切换图片。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js轮播图练习</title>
<style>
.box {
width: 60vw;
height: 500px;
margin: auto;
position: relative;
overflow: hidden;
}
.banner {
display: flex;
height: 100%;
transition: all 3s;
}
.banner>img {
width: 60vw;
}
.but {
width: 100%;
height: 40px;
position: absolute;
top: 240px;
display: flex;
justify-content: space-between;
}
/* 箭头样式 */
.but div {
width: 30px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: rgba(0, 0, 0, 0.4);
font-size: 20px;
color: white;
cursor: pointer;
}
/* 小圆点区域 */
.icon {
width: 100%;
height: 30px;
display: flex;
justify-content: center;
position: absolute;
bottom: 0;
}
.icon>span {
width: 10px;
height: 10px;
border-radius: 100%;
background-color: gray;
margin-left: 5px;
}
</style>
</head>
<body>
<!-- 可视区域 -->
<div class="box" onmouseover="move()" onmouseout="moves()">
<!-- 存放图片的容器 -->
<div class="banner">
<img src="" alt="" class="inge" />
</div>
<!-- 箭头区域 -->
<div class="but">
<div class="left" onclick="sport()">←</div>
<div class="right" onclick="sports()">→ </div>
</div>
<!-- 小圆点区域 -->
<div class="icon">
</div>
</div>
</body>
<script>
let data;
// 定义一个充当下标
let k = 0;
let dot;
let inter; // 定义定时器变量
// 获取大图片容器
let banner = document.getElementsByClassName('banner')[0];
// 获取小圆点区域
let round = document.getElementsByClassName('icon')[0];
// 获取左右箭头
let left = document.getElementsByClassName('left');
let right = document.getElementsByClassName('right');
let imgwidth;
// 获取JSON假数据
let shop = new XMLHttpRequest();
// json假数据自己写一下,图片名称用的是pic
shop.open('get', 'js/index.json', true);
shop.send();
shop.onreadystatechange = function() {
if (shop.readyState == 4 && shop.status == 200) {
let text = shop.responseText;
data = JSON.parse(text);
console.log(data);
ran();
}
};
// 渲染函数
function ran() {
let str = '';
let roundstr = '';
for (let i = 0; i < data.length; i++) {
// 字符串拼接图片
str += `<img src="${data[i].pic}" class="inge"/>`;
// 字符串拼接小圆点指示器
roundstr += `<span style="background-color:${i==0?'pink':'gray'}"></span>`
}
// 添加第一张图片以实现无缝轮播
str += `<img src="${data[0].pic}" class="inge"/>`;
// 将拼接的图片插入到轮播图长条内容区域
banner.innerHTML = str;
// 将拼接的小圆点指示器插入到页面中
round.innerHTML = roundstr;
// 获取图片的宽
imgwidth = document.getElementsByClassName('inge')[0].offsetWidth;
// 获取小圆点指示器
dot = document.getElementsByTagName('span');
// 设置定时器
inter = setInterval(scrolls, 2000);
dot[0].style.backgroundColor = 'pink';
}
// 图片自动轮播函数
function scrolls() {
// 增加索引 k，表示当前显示的图片
k++;
banner.style.transform = `translate(-${k*imgwidth}px)`;
banner.style.transition = `transform 0.5s ease`;
// 如果 k 超过数据长度，则重置为 0（循环播放）
if (k > data.length - 1) {
k = 0; // 重置索引
dot[k].style.backgroundColor = 'pink';
dot[data.length - 1].style.backgroundColor = 'gray';
setTimeout(() => {
// 设置延迟后将 banner 的位移和过渡效果重置
banner.style.transform = `translate(-${k*imgwidth}px)`;
banner.style.transition = `none`;
}, 500);
} else {
dot[k].style.backgroundColor = 'pink';
dot[k - 1].style.backgroundColor = 'gray';
}
}
// 鼠标移出移入
function move() {
clearInterval(inter);
}
function moves() {
inter = setInterval(scrolls, 2000);
}
// 点击左右箭头
let throttle = false; // 声明节流
function sport() {
// 判断如果正在节流则返回
if (throttle) return;
// 开始节流
throttle = true;
//清除定时器以避免冲突
clearInterval(inter);
if (k == 0) {
k = 0; // 重置索引
dot[k].style.backgroundColor = 'gray';
dot[data.length - 1].style.backgroundColor = 'pink';
// 将索引设置为数据长度，以便准备显示最后一张图片
k = data.length;
banner.style.transform = `translate(-${k * imgwidth}px)`; // 向左滑动至最后一张
banner.style.transition = `none`; // 移除过渡效果
} else {
dot[k].style.backgroundColor = 'gray'; // 当前小圆点设为灰色
dot[k - 1].style.backgroundColor = 'pink'; // 前一小圆点设为粉色
}
setTimeout(() => {
k--;
banner.style.transform = `translate(-${k*imgwidth}px)`; // 更新位移
banner.style.transition = `transform 0.5s ease`; // 设置过渡效果
}, 10);
// 设置定时器，0.5秒后取消
setTimeout(() => {
throttle = false;
}, 500);
}
// 点击向右移动
function sports() {
if (throttle) return;
throttle = true; // 开始节流
clearInterval(inter); // 清除定时器
scrolls(); // 调用滚动函数
// 设置定时器，0.5秒后取消节流
setTimeout(() => {
throttle = false;
}, 500);
}
</script>
</html>JavaScript轮播图，此代码他：
- 实现了切换图片的功能（上一张、下一张、指定索引）。
- 创建了小圆点并更新其状态。
- 实现了自动播放功能，每2秒切换一次图片。