JavaScript轮播图实现

pink大呲花

于 2024-10-11 21:55:16 发布

阅读量174

点赞数 5

文章标签：前端 javascript

本文链接：https://blog.csdn.net/BANaanaa/article/details/142864131

版权

这个代码创建了一个简单的轮播图，可以通过点击左右箭头或自动播放来切换图片。

<!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轮播图，此代码他：