js页面交互----背景图片交换

最新推荐文章于 2024-05-16 10:12:55 发布

原创最新推荐文章于 2024-05-16 10:12:55 发布 · 607 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #html

本文介绍如何使用JavaScript在前端实现点击按钮切换页面背景图片的功能，并动态显示当前图片索引。当达到最后一张图片时，点击下一张按钮将重新显示第一张图片。

实现点击按钮切换背景图并显示当前页面索引，当显示为最后一张图片时，点击下一张返回到第一张图片

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>切换图片</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			html {
				background-color: #e7eee0;
			}

			#outer {
				width: 500px;
				height: 350px;
				margin: 50px auto;
				padding: 10px;
				background-color: white;
				box-shadow: 0 5px 5px 0 #dcdcdc;
				text-align: center;
			}

			#outer img {
				width: 100%;
				height: 300px;
			}
		</style>
		<script>
			window.onload = function() {

				//点击切换图片
				//获取两个按钮
				var prev = document.getElementById("prev");
				var next = document.getElementById("next");

				//切换图片就是更改img标签src的属性
				//获取img图片标签
				var img = document.getElementsByTagName("img")[0];


				//创建一个数组来保存图片的路径
				var imgArr = ["./img/01.jpg", "./img/02.jpg", "./img/03.jpg", "./img/04.jpg", "./img/05.jpg"];

				//创建一个变量来保存当前显示图片的索引
				var index = 0;

				var info = document.getElementById("info");
				//设置提示信息
				info.innerHTML = "共" + imgArr.length + "张,当前第" + (index + 1) + "张";

				//分别为两个按钮绑定单击响应函数
				prev.onclick = function() {

					//切换到上一张index自减
					index--;
					//判断index是否小于0
					if (index < 0) {
						index = imgArr.length - 1;
					}
					//修改元素属性   元素.属性 = 属性值
					img.src = imgArr[index];
					//点击按钮更改信息
					info.innerHTML = "共" + imgArr.length + "张,当前第" + (index + 1) + "张";

				};

				next.onclick = function() {

					//切换到下一张index自加
					index++;
					if (index > imgArr.length - 1) {
						index = 0;
					};
					img.src = imgArr[index];
					//点击按钮更改信息
					info.innerHTML = "共" + imgArr.length + "张,当前第" + (index + 1) + "张";

				};

			};
		</script>
	</head>
	<body>

		<div id="outer">

			<p id="info"></p>
			<img src="./img/01.jpg" alt="图片">
			<button id="prev">上一张</button>
			<button id="next">下一张</button>

		</div>


	</body>
</html>