今日分享个有点瑕疵的自动轮播图

最新推荐文章于 2024-07-26 19:12:11 发布

IKUNzhenin

最新推荐文章于 2024-07-26 19:12:11 发布

阅读量338

点赞数 5

分类专栏： js练手功能 js中的功能的特性文章标签： css css3 前端

本文链接：https://blog.csdn.net/IKUNzhenin/article/details/136162012

版权

js中的功能的特性同时被 2 个专栏收录

63 篇文章 0 订阅

订阅专栏

js练手功能

59 篇文章 0 订阅

订阅专栏

这是一个基本的图片轮播器的HTML代码。

代码以HTML的文档类型声明和<html>标签开头。

<head>部分包含了必要的字符编码和视口设置的元标签，以及<title>标签。

在<style>标签中，定义了各个元素的CSS样式。

.box类表示图片轮播器的容器。它具有固定的宽度和高度，并使用overflow: hidden隐藏超出容器尺寸的内容。

.content类表示轮播图片的容器。它在.box容器内绝对定位，并具有较大的宽度以容纳多张图片并排显示。使用display: flex属性将图片水平对齐。

.content img选择器适用于轮播图片。它们被设置为100%的宽度和690像素的高度，以适应容器的尺寸。

.circle类表示轮播器的导航点。它被固定定位，并在页面水平居中对齐。每个导航点由一个带有背景颜色和圆形形状的<span>元素代表。

.line类表示轮播器下方的水平线。它使用带有.left和.right类的<a>标签创建左右箭头。

最后，代码以结束</body>和</html>标签结尾。还使用<script>标签包含了一个JavaScript文件，但在代码中没有提供该文件。

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

			.box {
				position: relative;
				width: 1421px;
				height: 690px;
				display: flex;
				overflow: hidden;
				box-shadow: 0 0 2px green;
			}

			.content {
				width: 9927px;
				position: absolute;
				z-index: 1;
				display: flex;
				height: 690px;
				transition :all 1s;
			}

			.content img {
				width: 100%;
				height: 690px;
			}

			.circle {
				z-index: 99;
				position: fixed;
				margin-top: -25px;
				display: flex;
				margin-left: 45%;
			}

			.circle span {
				width: 20px;
				height: 20px;
				display: inline-block;
				border-radius: 50%;
				font-size: 30px;
				margin-left: 4px;
				background-color: #000;
			}
				
			.line{
				width: 100%;
				height: 20px;
				display: flex;
			}
			.left{
				width: 4%;
				z-index: 99;
				height: 30px;
				line-height: 30px;
				text-align: center;
				margin-top: -400px;
				background-color: aliceblue;
				margin-left: 0%;
			}
			.right{
				width: 4%;
				z-index: 99;
				height: 30px;
				line-height: 30px;
				text-align: center;
				background-color: aliceblue;
				margin-top: -400px;
				margin-left: 96%;
			}
		</style>
	</head>
	<body>
	
		<div class="box">
			<div class="content">
			<!-- <img src="./img/10010.webp" alt="" />
				<img src="./img/10002.webp" alt="" />
				<img src="./img/10007.webp" alt="" />
				<img src="./img/10004.webp" alt="" />
				<img src="./img/10005.webp" alt="" />
				<img src="./img/10010.webp" alt="" /> -->
			</div>
		</div>
		<div class="circle">
			<span></span>
			<span></span>
			<span></span>
			<span></span> 
			<span></span>
			<span></span>
		</div>
		<div class="line">
			<a class="left"> < </a>
			<a class="right"> > </a>
		</div>
	</body>
	<script src="js/index.js"></script>
</html>

这段代码是一个用于实现图片轮播效果的JavaScript代码。

首先使用XMLHttpRequest对象创建了一个新的XMLHttpRequest实例，并发送一个GET请求到js/index.json接口。该请求是异步的，意味着会在后台发送并处理响应。

然后，通过xhr.onreadystatechange设置了一个事件监听器，当请求的状态发生变化时，会调用这个函数。在函数中，通过readyState和status属性检查请求是否已经完成（readyState == 4）并且是否成功（status == 200）。

如果请求成功，会获取响应的文本内容，并使用JSON.parse()将其解析为JSON对象。接着调用sitem()函数，将解析后的数据传递给它进行渲染。

在sitem()函数中，使用循环遍历数据，生成一个包含所有图片的HTML字符串，并将其插入到具有class为content的元素中。

然后，定义了一个自动轮播的函数items()。在这个函数中，通过修改元素的style属性实现图片的滚动效果。每隔1.5秒，index变量自增，将marginLeft属性设置为-index * imgWidth，即向左移动一个图片的宽度。当index达到最后一张图片时，通过setTimeout将其重置为0，并清除过渡效果。

最后，通过调用setInterval函数，将items()函数设置为每隔1.5秒自动执行一次，实现图片的自动轮播。

整体思路是通过XMLHttpRequest获取到图片数据，然后使用JavaScript动态渲染页面，并通过定时器实现自动轮播的效果。

let xhr = new XMLHttpRequest();
// 创建一个新的XMLHttpRequest对象，命名为xhr。用来请求接口，处理异步操作；
// 这个对象用于在浏览器和服务器之间发送 HTTP 请求和接收响应。
xhr.open('get', 'js/index.json', true);
// 打开一个新的HTTP GET请求。// 请求的URL是'js/index.json'。// 第三个参数true表示请求是异步的。
xhr.send();
//发送要请求的要求
xhr.onreadystatechange = function() {
	// 设置一个事件监听器，当请求的状态发生变化时，这个函数就会被调用。
	if (xhr.readyState == 4 && xhr.status == 200) {
		// 检查请求是否已经完成（readyState == 4）并且是否成功（status == 200）。
		let text = xhr.responseText;
		// 获取响应的文本内容
		let data = JSON.parse(text);
		// 将响应的文本内容解析为JSON对象，并将其赋值给变量data。
		sitem(data);

		//一进页面就渲染省级的数据，以方便点击省级时展现省级的数据
		let content = document.getElementsByClassName('content')[0];
		console.log(content)
		let imgList = content.children;
		console.log(imgList);
		let imgWidth = imgList[0].offsetWidth;
		console.log(imgWidth);
		let index = 0; // 在循环外部声明 index 变量
		setInterval(items,1500)
		function items() {
			index++;
			content.style.transition = "all 1s";
			content.style.marginLeft = -index * imgWidth + "px"
			if (index == 7) {
				setTimeout(function() {
					index = 0;
					content.style.transition = "";
					content.style.marginLeft = "0px";
				}, 100);
			}else{
				console.log(`我选中了第${index}个`)
			}
		};
	}
};

//用以存储数据
let box = document.getElementsByClassName('box')[0];
//渲染图片
function sitem(data) {
	let str = "";
	for (let i = 0; i < data.length; i++) {
		str += `
		<img  src="${data[i].img}" alt="" />
		`
	}
	str += `
	<img  src="./img/10004.webp" alt="" />`
	document.getElementsByClassName('content')[0].innerHTML = str;
}



// setInterval 是一个 JavaScript 函数，用于在指定的时间间隔内重复执行某个函数或代码片段。这个时间间隔是以毫秒为单位的。当 setInterval 被调用时，它会返回一个 ID，这个 ID 可以被用来引用或稍后清除这个定时器。
// 首先获取所有的数据以方便用到的数据的
//永久定时器使其永久定时
//自动轮播
// 1.获取所有的数据

// 永久定时让其每隔1秒轮播
//获取每个图片
//让其向右转每个图片的宽度，（还要获取每个图片的宽度）
//最后一张图片为第一张
//让它每隔1秒自

IKUNzhenin

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
今日分享个有点瑕疵的自动轮播图

整体思路是通过XMLHttpRequest获取到图片数据，然后使用JavaScript动态渲染页面，并通过定时器实现自动轮播的效果。它们被设置为100%的宽度和690像素的高度，以适应容器的尺寸。函数中，使用循环遍历数据，生成一个包含所有图片的HTML字符串，并将其插入到具有。设置了一个事件监听器，当请求的状态发生变化时，会调用这个函数。函数设置为每隔1.5秒自动执行一次，实现图片的自动轮播。类表示图片轮播器的容器。如果请求成功，会获取响应的文本内容，并使用。这是一个基本的图片轮播器的HTML代码。
复制链接

扫一扫

专栏目录