JavaScript轮播图

HTML部分

html 复制代码
<div class="box" onmouseover="over()" onmouseout="noover()">
			<img src="./img/zuo.png" alt="" class="left_arrow" onclick="left_last()">
			<img src="./img/yy.png" alt="" class="right_arrow" onclick="right_word()">
			<div id="carousel">
			</div>
			<div class="round">

			</div>
		</div>

JavaScript部分:携带注释哟家人们

javascript 复制代码
<script>
			let data; // 声明一个变量用于存储从服务器获取的数据
			let k = 0; // 当前显示的图片索引
			let imgwidth; // 图片宽度
			let imgheight; // 图片高度
			let inter; // 用于存储定时器的变量

			// 创建一个XMLHttpRequest对象用于发送请求
			let xhr = new XMLHttpRequest();
			// 设置请求方式和请求地址
			xhr.open('get', './js/banner.json', true);
			// 发送请求
			xhr.send();
			// 接收返回的响应数据
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					let text = xhr.responseText;
					// 将获取的文本数据转换为JSON格式
					data = JSON.parse(text);
					// 调用展示图片的函数
					console.log(data); // 打印获取到的数据到控制台
					// 调用展示图片的函数
					show(data);
				}
			};

			// 获取轮播图容器元素
			let carsoule = document.getElementById('carousel');

			function show(data) {
				let str = ``; // 声明一个空字符串用于存储要渲染的图片标签
				let sti = ``; // 声明一个空字符串用于存储轮播图指示器的标签
				for (let i = 0; i < data.imge.length; i++) {
					// 渲染图片到页面中
					str += `<img src="${data.imge[i]}" alt="" class="img_carousel">`;
					// 根据索引,渲染轮播图指示器
					if (i == 0) {
						sti += `<div style="background-color: aqua;"></div>`;
					} else {
						sti += `<div></div>`;
					}
				}

				// 将最后一张图片再次添加到轮播图容器中,用于实现循环播放
				str += `<img src="${data.imge[0]}" alt="">`;
				// 将图片和轮播图指示器渲染到页面中
				document.getElementById('carousel').innerHTML = str;
				document.getElementsByClassName('round')[0].innerHTML = sti;

				// 获取第一张图片的宽度
				imgwidth = document.getElementsByClassName('img_carousel')[0].offsetWidth;
				// 调用轮播功能
				noover();
			}

			// 获取轮播图指示器的所有子元素
			let dots = document.getElementsByClassName('round')[0].children;

			// 下一张图片函数
			function next() {
				k++; // 索引加1,显示下一张图片
				carsoule.style.marginLeft = "-" + imgwidth * k + "px"; // 设置轮播图容器的左边距
				carousel.style.transition = "margin-left 1s"; // 设置过渡效果

				// 如果达到最后一张图片,回到第一张图片
				if (k == data.imge.length) {
					setTimeout(function() {
						carousel.style.transition = "none"; // 去掉过渡效果
						k = 0; // 将索引设置为0,回到第一张图片
						carousel.style.marginLeft = `-${k * 100}%`; // 设置轮播图容器的左边距
					}, 1000);
				}

				// 根据索引,设置轮播图指示器的样式
				if (k < dots.length) {
					dots[k].style.background = "aqua"; // 当前图片指示器背景颜色为aqua
					dots[k - 1].style.background = "pink"; // 上一张图片指示器背景颜色为pink
				} else if (k == dots.length) {
					dots[0].style.background = "aqua"; // 第一张图片指示器背景颜色为aqua
					dots[k - 1].style.background = "pink"; // 最后一张图片指示器背景颜色为pink
					k = 0; // 将索引设置为0,回到第一张图片
				}
			}

			// 自动轮播函数
			function noover() {
				inter = setInterval(next, 2000); // 每2秒调用一次next函数,实现自动轮播
			}

			// 鼠标悬停在轮播图上,停止自动轮播
			function over() {
				clearInterval(inter); // 清除定时器,停止自动轮播
			}

			// 获取右箭头元素
			let right = document.getElementsByClassName('right_arrow')[0];

			// 点击右箭头切换到下一张图片
			function right_word() {
				right.onclick = null; // 防止连续点击
				next(); // 调用下一张图片函数

				// 1.5秒后恢复右箭头的点击事件
				setTimeout(function() {
					right.onclick = right_word;
				}, 1500);
			}

			// 获取左箭头元素
			// let left = document.getElementsByClassName('left_arrow')[0];

			// 点击左箭头切换到上一张图片
			function left_last() {
				k--; // 索引减1,显示上一张图片

				// 如果索引小于0,回到最后一张图片
				if (k < 0) {
					k = dots.length; // 将索引设置为指示器数量,显示最后一张图片
					carousel.style.transition = ""; // 去掉过渡效果
					carsoule.style.marginLeft = "-" + imgwidth * k + "px"; // 设置轮播图容器的左边距

					// 0.01秒后,过渡效果生效,显示倒数第二张图片
					setTimeout(function() {
						k--; // 索引减1,显示倒数第二张图片
						carousel.style.transition = "all 1s"; // 添加过渡效果
						carsoule.style.marginLeft = "-" + imgwidth * k + "px"; // 设置轮播图容器的左边距
						dots[k].style.background = "aqua"; // 当前图片指示器背景颜色为aqua
						dots[0].style.background = "pink"; // 第一张图片指示器背景颜色为pink
					}, 10);
				} else {
					carousel.style.transition = "all 1s"; // 添加过渡效果
					carsoule.style.marginLeft = "-" + imgwidth * k + "px"; // 设置轮播图容器的左边距
					dots[k].style.background = "aqua"; // 当前图片指示器背景颜色为aqua
					dots[k + 1].style.background = "pink"; // 下一张图片指示器背景颜色为pink
				}
			}
		</script>
相关推荐
翻滚吧键盘8 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾12 分钟前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉20 分钟前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
wei_shuo1 小时前
飞算 JavaAI 开发助手:深度学习驱动下的 Java 全链路智能开发新范式
java·开发语言·飞算javaai
熊猫钓鱼>_>1 小时前
用Python解锁图像处理之力:从基础到智能应用的深度探索
开发语言·图像处理·python
小飞悟2 小时前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
code_YuJun2 小时前
Promise 基础使用
前端·javascript·promise
GO兔2 小时前
开篇:GORM入门——Go语言的ORM王者
开发语言·后端·golang·go