JS：练习展示相册

最新推荐文章于 2023-06-19 00:38:44 发布

F_aF_a

最新推荐文章于 2023-06-19 00:38:44 发布

阅读量126

点赞数

分类专栏： # JavaScript

本文链接：https://blog.csdn.net/qq_37252519/article/details/103756208

版权

JavaScript 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

文件目录
实现图片切换功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#outer{
				width:500px;
				margin:90px auto;
				padding:10px;
				background-color: antiquewhite;
				/*设置文本居中*/
				text-align:center;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/*点击按钮切换图片*/
				
				//获取两个按钮
				var prev = document.getElementById("prev");
				var next = document.getElementById("next");
				
				/*
				要切换图片就是要修改img标签的src属性
				获取img标签，因为getElementsByTagName返回一共数组，而html的body中只有一共img所以取下标为0的值
				*/
				var img = document.getElementsByTagName("img")[0];
				var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]
				var index = 0;
				
				var info = document.getElementById("info");
				info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
				
				next.onclick = function(){//下一张
					index = (index + imgArr.length + 1)%imgArr.length;
					img.src = imgArr[index];
					info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
					
				}
				prev.onclick = function(){//上一张
					index = (index + imgArr.length - 1)%imgArr.length;
					img.src = imgArr[index];
					info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
					
				}
			}
		</script>
	</head>
	<body>
		<div id="outer">
			<p id="info"></p>
			<img src="img/1.jpg" alt="冰棍"/>
			<button id = "prev">上一张</button>
			<button id = "next">下一张</button>
		</div>
	</body>
</html>