js-基础轮播图制作

最新推荐文章于 2024-07-26 20:46:33 发布

神明木佑

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量204

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/z16638522031/article/details/140672363

版权

话不多说直接上代码

html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./css/banner.css" />
	</head>
	<body>
		<div class="Viewable" onmouseover="Moveto()" onmouseout="Moveout()">
			<div class="content">
			</div>
			<div class="V-left" onclick="left()">
				<img src="./img/Left_arrow.png" alt="" />
			</div>
			<div class="V-right" onclick="right()">
				<img src="./img/right-arrow.png" alt="" />
			</div>
			<div class="v-round">

			</div>
		</div>
		<script>
			//获取包裹圆点的盒子
			let round = document.getElementsByClassName('v-round')[0];
			//获取包裹所有图片的盒子
			let content = document.getElementsByClassName('content')[0];
			//获取左箭头的盒子
			let vleft = document.getElementsByClassName('V-left')[0];
			//获取右箭头的盒子
			let vright = document.getElementsByClassName('V-right')[0];
			//声明数据的变量
			let data;
			//声明一个下标变量
			let k = 0;
			//声明一个图片宽度的变量
			let widths;
			//声明一个定时器的变量
			let b;
			// 设置请求方式和请求地址
			let xhr = new XMLHttpRequest();
			// 接收返回的响应数据
			xhr.open('get', 'js/banner.json', true);
			xhr.send();
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					//将获取的文本数据转换为JSON格式
					let text = xhr.responseText;
					// 调用展示商品的函数
					data = JSON.parse(text);
					// 调用函数
					prints(data);
				}
			}

			function prints(data) {
				//声明两个字符串一个为图片的,一个是圆点的
				let str = '';
				let div = "";
				//循环数据获取里面的内容
				for (let i = 0; i < data.imgs.length; i++) {
					//字符串拼接图片
					str += `<img src="${data.imgs[i]}" alt="${data.imgs[i]}">`
					//判断i是否为0
					if (i == 0) {
						//字符串拼接,给圆点一个背景颜色
						div += `<div style="background-color: red;"></div>`;
					} else {
						//圆点字符串拼接
						div += `<div></div>`
					}
				}
				//把圆点添加到放圆点的div里面
				round.innerHTML = div;
				//在拼接一个第一张图片
				str += `<img src="${data.imgs[0]}" alt="${data.imgs[0]}">`
				//把图片放到包裹图片的div里面
				content.innerHTML = str;
				//获取第一张图片
				let picture = content.getElementsByTagName('img')[0];
				//获取图片的宽度
				widths = picture.offsetWidth;
				//轮播图的定时器
				Moveout();
			}
			//获取圆点的数组
			let dot = round.getElementsByTagName('div');
			//轮播图
			function banners() {
				//每次执行让下标加一
				k++;
				//设置过渡时间
				content.style.transition = "all 1s";
				
				content.style.marginLeft = '-' + widths * k + 'px';
				if (k == dot.length) {
					dot[0].style.backgroundColor = 'red';
					dot[k - 1].style.backgroundColor = 'white';
					setTimeout(function() {
						k = 0;
						content.style.marginLeft = '-' + widths * k + 'px';
						content.style.transition = "0s";
					}, 1000)
				} else if (k < dot.length) {
					dot[k - 1].style.backgroundColor = 'white';
					dot[k].style.backgroundColor = 'red';
				}
			}
			//清除定时器
			function Moveto() {
				console.log(1);
				clearInterval(b);
			}
			//设置定时器
			function Moveout() {
				b = setInterval(banners, 3000);
				console.log(1);
			}
			//左箭头的点击事件
			function left() {
				vleft.onclick = null;
				k--;
				if (k < 0) {
					k = dot.length;
					content.style.marginLeft = '-' + widths * k + 'px';
					content.style.transition = "0s";
					setTimeout(function() {
						k--;
						dot[k].style.backgroundColor = 'red';
						dot[0].style.backgroundColor = 'white';
						content.style.marginLeft = '-' + widths * k + 'px';
						content.style.transition = "all 1s";
					}, 0)
				} else {
					dot[k + 1].style.backgroundColor = 'white';
					dot[k].style.backgroundColor = 'red';
					content.style.transition = "all 1s";
					content.style.marginLeft = '-' + widths * k + 'px';
				}
				setTimeout(function() {
					vleft.onclick = left;
				}, 1100)
			}
			//右箭头的点击事件
			function right() {
				vright.onclick = null;
				banners();
				setTimeout(function() {
					vright.onclick = right;
				}, 1500)
			}
		</script>
	</body>
</html>

css：

* {
	margin: 0%;
	padding: 0%;
}

.Viewable {
	width: 15%;
	margin: auto;
	height: 325px;
	position: relative;
	overflow: hidden;
}

.V-left {
	height: 6%;
	position: absolute;
	top: 47%;
	left: -1.5%;
	background: aqua;
}

.V-left img {
	width: 100%;
	height: 100%;
}

.V-right {
	height: 6%;
	position: absolute;
	top: 47%;
	right: -1.5%;
	background: aqua;
}

.V-right img {
	width: 100%;
	height: 100%;
}

.content {
	height: 325px;
	font-size: 0;
	display: flex;
	flex-wrap: nowrap;

}

.content img {
	width: 230px;
	height: 100%;
	flex-shrink: 0;
}

.v-round {
	width: 50%;
	height: 10px;
	border: solid 0px;
	position: absolute;
	left: 25%;
	bottom: 10px;
	display: flex;
	justify-content: space-around;
}

.v-round div {
	width: 10%;
	height: 12px;
	border-radius: 100%;
	background-color: aliceblue;
}

假数据：

{
	"imgs": [
		"./img/18d8bc3eb13533fa40fd17276d928a1941345b3c.webp",
		"./img/4034970a304e251fb75ab13d19c7be117e3e5309.webp",
		"./img/359b033b5bb5c9eacfaa73e11478c1063af3b31b.webp",
		"./img/8d5494eef01f3a2910bcc12f5864cb375d607ca6.webp",
		"./img/4e4a20a4462309f74a21b569cc4f7bf5d6cad6c3.webp"
	]
}

实际效果：