当前位置： 首页 > article >正文

如何用JavaScript实现轮播图

article 2025/1/14 15:28:32

该轮播图有HTML，CSS，JSON，JS部分所组成，主要的核心是js部分。

该轮播图的功能有：轮播图自动轮播/鼠标放入轮播暂停/鼠标移出轮播继续/点击左右按钮切换图片/图片的防抖 。

以下为HTML部分与CSS部分，就不过多赘述，主要以js不五分为主：

HTML部分：

<!-- 可视区域 -->
		<!-- onmouseout鼠标移入停
			onmouseover鼠标移出动-->
		<div class="view" onmouseout="mouseOutt()" onmouseover="mouseOverr()">
			<!-- 长条 -->
			<div class="banner">
			</div>
			<!-- 图片上的按钮 -->
			<div class="button">
				<button class="leftBtn" onclick="moveImgL()"><img src="./img/箭头.png" alt="" /></button>
				<button class="rightBtn" onclick="moveImgR()"><img src="./img/箭头 (2).png" alt="" /></button>
			</div>
			<!-- 圆点 -->
			<div class="round"></div>

		</div>

CSS部分：

* {
				margin: 0;
				padding: 0;
			}

			.view {
				width: 55vw;
				height: 560px;
				margin: auto;
				position: relative;
				overflow: hidden;
				background-color: aquamarine;
			}

			.banner {
				display: flex;
				height: 100%;

			}

			.banner img {
				width: 55vw;
				/* 防止图片缩小 */
				flex-shrink: 0;
			}

			.button {
				position: absolute;
				width: 100%;
				top: 50%;
				/* background-color: black; */
				display: flex;
				justify-content: space-between;
			}

			.leftBtn {
				border: none;
				/* background-color: transparent; */
				background-color: rgba(0, 0, 0, 0.5);
				cursor: pointer;
			}

			.rightBtn {
				border: none;
				/* background-color: transparent; */
				background-color: rgba(0, 0, 0, 0.5);
				cursor: pointer;
			}

			.round {
				position: absolute;
				/* background-color: blue; */
				width: 80px;
				height: 50px;
				bottom: 10px;
				left: 50%;
				display: flex;
				transform: translateX(-50%);
			}

			.point {
				width: 10px;
				height: 10px;
				background-color: gray;
				margin: 3px;
				/* border-radius: 50%; */
				cursor: pointer;
			}

JS部分：

1.全局声明： 以下声明放到全局

// 图的下标
			let k = 0;
			//数据
			let data;
			//定时器，后续用来清空
			let inter;
			//图片的宽度
			let imgWidth;
			//获取可视区域
			let view = document.getElementsByClassName('view')[0];
			//获取长条（放图片的地方）
			let banner = document.getElementsByClassName('banner')[0];
			//获取圆点框架
			let round = document.getElementsByClassName('round')[0];
			//圆点
			let point;

2.AJAX部分,访问json文件并获取到里面的数据。 

let xhr = new XMLHttpRequest();
			xhr.open('get', './js/bannerCenter.json', true);
			xhr.send();
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					let text = xhr.responseText;
					console.log(text);
					data = JSON.parse(text);
					console.log(data);
					// 渲染函数
					show(data);
					console.log(data);
				}
			};

3.渲染函数，通过调用渲染函数实现页面的更新：

function show(data) {
				// 拼图片
				let imgStr = '';
				// 拼圆点
				let pointStr = '';
				for (let i = 0; i < data.length; i++) {
					imgStr += `<img src="${data[i]}" alt="" class="imgW"/>`;
					// 循环拼接圆点（有几个图就有几个图就拼几个点）如果是第一个就变色
					if (i == 0) {
						pointStr += `<div class="point" style="background-color: red;"></div>`
					} else {
						//否则就不是第一个就换回原来的颜色
						pointStr += `<div class="point" style="background-color: gray;"></div>`
					}
				}
				console.log(imgStr);
				// 循环外再拼一张为首图
				imgStr += `<img src="${data[0]}" alt="" />`;
				//拼好图的往banner里放
				banner.innerHTML = imgStr;
				//拼接好的点往round放
				round.innerHTML = pointStr;
				//获取所有圆点
				point = document.getElementsByClassName('point');
				// 获取图片宽度
				imgWidth = document.getElementsByClassName('imgW')[0].offsetWidth;
				console.log(imgWidth);
				// 定时器，用来位移
				inter = setInterval(moveImg, 2000);

			}

4.平移函数：图片的位移逻辑都在这里面，后续通过定时器可以设置执行这个函数的时间周期.

function moveImg() {
				// 图片下标+1
				k++;
				// 平移样式
				banner.style.transition = "transform 1s ease"
				// 平移的尺度
				banner.style.transform = `translate(-${k * imgWidth}px)`;

				// 如果k大于长度说明超出了
				if (k > data.length - 1) {
					// 上定时器。有一个时间（短的话图片会抖，长的话会超出不显示图片）从最后一个图片闪到第一张
					setTimeout(function() {
						// 清零
						k = 0;
						// 回到第一张
						banner.style.transform = `translate(-${k*imgWidth}px)`;
						// 清除样式
						banner.style.transition = "none";
					}, 1000);
				}
				//圆点的右位移
				// 如果k小于圆点的长度，说明还没到最后一个位置
				if (k < point.length) {
					point[k].style.background = "red";
					point[k - 1].style.background = "gray";
				} else if (k == point.length) {
					//否则就到达了最后位置
					point[0].style.background = "red";
					point[k - 1].style.background = "gray";
				}
			}

 5.鼠标事件函数，鼠标放到图上，轮播暂停。

function mouseOverr() {
				clearInterval(inter);
			}

6.鼠标事件函数，鼠标移到图片外，轮播继续.

function mouseOutt() {
                   //设置定时器，每两秒执行平移函数
				inter = setInterval(moveImg, 2000);
			}

7.获取左右箭头，及初始化点击状态，方便后续进行一系列操作

// 获取左右箭头，后续绑定事件
			let leftBtn = document.getElementsByClassName('leftBtn')
			let rightBtn = document.getElementsByClassName('rightBtn')
			//点击状态，初始为false未点击
			let clicked = false;

8.左按钮的点击事件函数：

function moveImgL() {
				// 先判断按钮是否被点击
				if (clicked) {
					return;
				}
				// 标记为已被点击
				clicked = true;

				//如果是第一张的话就重新赋值
				if (k == 0) {
					// 让k等于5（data的长度）
					k = data.length;
					// 在平移五张的宽度,从第一张到第五张
					banner.style.transform = `translate(-${k*imgWidth}px)`;
					// 把平移的样式去掉，为了不让用户看出来闪的时候
					banner.style.transition = "none";
					//如果不去掉的话就是下面的样子
					// banner.style.transition = "transform 1s ease"
				}
				//点左箭头平移的响应时间10ms
				setTimeout(function() {
					k--;
					banner.style.transform = `translate(-${k*imgWidth}px)`;
					//ch重新上过度样式
					banner.style.transition = "transform 1s ease"
					//圆点的左位移
					//data.length - 1最后一个位置
					if (k == data.length - 1) {
						point[k].style.background = "red";
						point[0].style.background = "gray";
					} else {
						point[k].style.background = "red";
						point[k + 1].style.background = "gray";
					}
				}, 10);
				//恢复点击事件按的定时器
				setTimeout(function() {
					clicked = false;
				}, 800);
			}

9.右按钮的点击事件函数：
        以为他的逻辑和平移函数一样，所以直接在里面调用平移函数。

function moveImgR() {
				// 先判断按钮是否被点击
				if (clicked) {
					return;
				}
				//跟轮播的效果一样
				moveImg();

				// 标记为已被点击
				clicked = true;
				setTimeout(function() {
					clicked = false;
				}, 1000);
			}

JSON部分：

图片的路径即可

[
    "./img/bmw1.jpg",
    "./img/bmw2.jpg",
    "./img/bmw3.jpg",
    "./img/bmw4.jpg",
    "./img/bmw5.jpg"
]

全部代码的合并：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.view {
				width: 55vw;
				height: 560px;
				margin: auto;
				position: relative;
				overflow: hidden;
				background-color: aquamarine;
			}

			.banner {
				display: flex;
				height: 100%;

			}

			.banner img {
				width: 55vw;
				/* 防止图片缩小 */
				flex-shrink: 0;
			}

			.button {
				position: absolute;
				width: 100%;
				top: 50%;
				/* background-color: black; */
				display: flex;
				justify-content: space-between;
			}

			.leftBtn {
				border: none;
				/* background-color: transparent; */
				background-color: rgba(0, 0, 0, 0.5);
				cursor: pointer;
			}

			.rightBtn {
				border: none;
				/* background-color: transparent; */
				background-color: rgba(0, 0, 0, 0.5);
				cursor: pointer;
			}

			.round {
				position: absolute;
				/* background-color: blue; */
				width: 80px;
				height: 50px;
				bottom: 10px;
				left: 50%;
				display: flex;
				transform: translateX(-50%);
			}

			.point {
				width: 10px;
				height: 10px;
				background-color: gray;
				margin: 3px;
				/* border-radius: 50%; */
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<!-- 可视区域 -->
		<!-- onmouseout鼠标移入停
			onmouseover鼠标移出动-->
		<div class="view" onmouseout="mouseOutt()" onmouseover="mouseOverr()">
			<!-- 长条 -->
			<div class="banner">
			</div>
			<!-- 图片上的按钮 -->
			<div class="button">
				<button class="leftBtn" onclick="moveImgL()"><img src="./img/箭头.png" alt="" /></button>
				<button class="rightBtn" onclick="moveImgR()"><img src="./img/箭头 (2).png" alt="" /></button>
			</div>
			<!-- 圆点 -->
			<div class="round"></div>

		</div>


		<script>
			// 图的下标
			let k = 0;
			//数据
			let data;
			//定时器，后续用来清空
			let inter;
			//图片的宽度
			let imgWidth;
			//获取可视区域
			let view = document.getElementsByClassName('view')[0];
			//获取长条（放图片的地方）
			let banner = document.getElementsByClassName('banner')[0];
			//获取圆点框架
			let round = document.getElementsByClassName('round')[0];
			//圆点
			let point;



			let xhr = new XMLHttpRequest();
			xhr.open('get', './js/bannerCenter.json', true);
			xhr.send();
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					let text = xhr.responseText;
					console.log(text);
					data = JSON.parse(text);
					console.log(data);
					// 渲染函数
					show(data);
					console.log(data);
				}
			};


			// 渲染函数
			function show(data) {
				// 拼图片
				let imgStr = '';
				// 拼圆点
				let pointStr = '';
				for (let i = 0; i < data.length; i++) {
					imgStr += `<img src="${data[i]}" alt="" class="imgW"/>`;
					// 循环拼接圆点（有几个图就有几个图就拼几个点）如果是第一个就变色
					if (i == 0) {
						pointStr += `<div class="point" style="background-color: red;"></div>`
					} else {
						//否则就不是第一个就换回原来的颜色
						pointStr += `<div class="point" style="background-color: gray;"></div>`
					}
				}
				console.log(imgStr);
				// 循环外再拼一张为首图
				imgStr += `<img src="${data[0]}" alt="" />`;
				//拼好图的往banner里放
				banner.innerHTML = imgStr;
				//拼接好的点往round放
				round.innerHTML = pointStr;
				//获取所有圆点
				point = document.getElementsByClassName('point');
				// 获取图片宽度
				imgWidth = document.getElementsByClassName('imgW')[0].offsetWidth;
				console.log(imgWidth);
				// 定时器，用来位移
				inter = setInterval(moveImg, 2000);

			}

			// 平移函数
			function moveImg() {
				// 图片下标+1
				k++;
				// 平移样式
				banner.style.transition = "transform 1s ease"
				// 平移的尺度
				banner.style.transform = `translate(-${k * imgWidth}px)`;

				// 如果k大于长度说明超出了
				if (k > data.length - 1) {
					// 上定时器。有一个时间（短的话图片会抖，长的话会超出不显示图片）从最后一个图片闪到第一张
					setTimeout(function() {
						// 清零
						k = 0;
						// 回到第一张
						banner.style.transform = `translate(-${k*imgWidth}px)`;
						// 清除样式
						banner.style.transition = "none";
					}, 1000);
				}
				//圆点的右位移
				// 如果k小于圆点的长度，说明还没到最后一个位置
				if (k < point.length) {
					point[k].style.background = "red";
					point[k - 1].style.background = "gray";
				} else if (k == point.length) {
					//否则就到达了最后位置
					point[0].style.background = "red";
					point[k - 1].style.background = "gray";
				}
			}

			//鼠标入，停
			function mouseOverr() {
				clearInterval(inter);
			}
			//鼠标出，动
			function mouseOutt() {
				inter = setInterval(moveImg, 2000);
			}

			// 获取左右箭头，后续绑定事件
			let leftBtn = document.getElementsByClassName('leftBtn')
			let rightBtn = document.getElementsByClassName('rightBtn')
			//点击状态，初始为false未点击
			let clicked = false;

			//左按钮点击事件
			function moveImgL() {
				// 先判断按钮是否被点击
				if (clicked) {
					return;
				}
				// 标记为已被点击
				clicked = true;

				//如果是第一张的话就重新赋值
				if (k == 0) {
					// 让k等于5（data的长度）
					k = data.length;
					// 在平移五张的宽度,从第一张到第五张
					banner.style.transform = `translate(-${k*imgWidth}px)`;
					// 把平移的样式去掉，为了不让用户看出来闪的时候
					banner.style.transition = "none";
					//如果不去掉的话就是下面的样子
					// banner.style.transition = "transform 1s ease"
				}
				//点左箭头平移的响应时间10ms
				setTimeout(function() {
					k--;
					banner.style.transform = `translate(-${k*imgWidth}px)`;
					//ch重新上过度样式
					banner.style.transition = "transform 1s ease"
					//圆点的左位移
					//data.length - 1最后一个位置
					if (k == data.length - 1) {
						point[k].style.background = "red";
						point[0].style.background = "gray";
					} else {
						point[k].style.background = "red";
						point[k + 1].style.background = "gray";
					}
				}, 10);
				//恢复点击事件按的定时器
				setTimeout(function() {
					clicked = false;
				}, 800);
			}

			//右按钮点击事件
			function moveImgR() {
				// 先判断按钮是否被点击
				if (clicked) {
					return;
				}
				//跟轮播的效果一样
				moveImg();

				// 标记为已被点击
				clicked = true;
				setTimeout(function() {
					clicked = false;
				}, 1000);
			}
		</script>
	</body>
</html>


http://www.kler.cn/a/502348.html

相关文章：

  • Maven 在尝试连接到 Maven Central 仓库超时的解决方案和排查步骤
  • 【HTML+CSS+JS+VUE】web前端教程-31-css3新特性
  • MySQL的安装
  • Qt WORD/PDF（五）使用Json一键填充Word表格
  • C#调用OpenCvSharp实现图像的开运算和闭运算
  • poi处理多选框进行勾选操作下载word以及多word文件压缩
  • MySQL 5.7 与 MySQL 8 的区别
  • html辅助标签与样式表
  • macOS 使用 FreeRDP 远程访问 Windows：完整指南20250109
  • Dockerfile的作用
  • 【蓝牙】win11 笔记本电脑连接 hc-06
  • 使用 IntelliJ IDEA 创建简单的 Java Web 项目
  • 【向量数据库 pymilvus】Milvus Standalone（单机模式）如何安装
  • 【react进阶】create-react-app的项目工程格式化和eslint校验配置
  • 充电桩的GB39752和GB44263标准测试要求
  • 【网络协议】ACL（访问控制列表）第一部分
  • Go可以使用设计模式，但绝不是《设计模式》中的那样
  • 可编辑精品PPT | 城投集团（行业）数字化解决方案
  • Spring底层核心原理解析
  • Qt之http客户端类
  • Golang——协程同步
  • flink kafka 版本对照表
  • 给DevOps加点料：融入安全性的DevSecOps
  • linux---Nginx详细教程（包含安装，网站部署）
  • 2008-2020年各省社会消费品零售总额数据
  • vim基本命令（vi、工作模式、普通模式、插入模式、可视模式、命令行模式、复制、粘贴、插入、删除、查找、替换）