JS基础-图片切换的练习-尚硅谷-P95_尚硅谷js基础95集代码-CSDN博客

本文链接：https://blog.csdn.net/qq_43624193/article/details/122657535

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#outer{
				width: 300px;
				margin: 10px auto;
				background-color: greenyellow;
				text-align: center;
				padding: 10px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/**
				 * 点击按钮切换图片
				 */
				//获取两个按钮
				var prev = document.getElementById("prev");
				var next = document.getElementById("next");
				
				var img=document.getElementsByTagName("img")[0];
				//分别为两个按钮绑定响应
				var imgArr=["./img/1.jpg","./img/2.jpg","./img/3.jpg","./img/4.jpg"];
				var info=document.getElementById("info");
			
				var index=0;
				info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
				prev.onclick = function(){
					//alert("上一个");
					//切换图片就是修改src属性
		            index--;
					if(index<0){
						index=imgArr.length-1;
					//	alert("这已经是第一张了");
					}
					info.innerHTML="一共"+imgArr.length+"张图片，当前第"+index+"张";
					
					img.src=imgArr[index];
					
				}
				next.onclick = function(){
					//alert("下一个");
					//切换图片就是修改src属性
					//修改元素属性 
					index++;
				if(index>imgArr.length-1){
						index=0;
					//	alert("这已经是最后一张了");
					}
					info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
					img.src=imgArr[index];
				}
			}
		</script>
	</head>
	<body>
		<div id="outer">
			<p id="info">一共4张图片，当前是第1张</p>
			<img src="./img/1.jpg" alt="机智的医生生活" title="机智的医生生活" width="300px" height="200px"/>
			<button id="prev">上一张</button>
			<button id="next">下一张</button>
		</div>
	</body>
</html>