master

分支 (1)

管理

管理

master

javascript_daily_practise
/
practise08.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片切换练习</title>
	</head>
	<body>
		<div id="content">
			<p id="info">当前是第1张图片,一共3张</p>
			<img src="./img/pic1.jpg">
			<br />
			<button type="button" id="prev">上一张</button>
			<button type="button" id="next">下一张</button>
		</div>
	</body>
</html>

<script type="text/javascript">
	// 点击按钮切换图片
	var prev = document.getElementById("prev");
	var next = document.getElementById("next");
	// 获取info
	var info = document.getElementById("info");
	// 注意方法返回的是类数组
	var img = document.getElementsByTagName("img")[0];
	console.log(img)
	// 使用数组保存图片路径
	var imglist = ["./img/pic1.jpg","./img/pic2.jpg","./img/pic3.jpg"]
	// 正在显示图片的索引
	var temp = 0;
	prev.onclick = function(){
			temp--;
			// 实现循环
			if(temp<0)
				temp+=imglist.length;
			console.log(temp);
			// 修改src值
			img.src = imglist[temp];
			console.log(img.src);
			info.innerText = "这是第"+(temp+1)+"张图片，一共"+imglist.length+"张";
	}
	next.onclick = function(){
			temp++;
			if(temp == imglist.length)
				temp-=imglist.length;
			console.log(temp);
			img.src = imglist[temp];
			console.log(img.src);
			info.innerText = "这是第"+(temp+1)+"张图片，一共"+imglist.length+"张";
	}
</script>

<style type="text/css">
	#content{
		width: 37.5rem;
		margin: 3.125rem auto;
		background-color: #f5f5f5;
		text-align: center;
	}
	button{
		width: 6.25rem;
		margin: 0.3125rem;
		padding: 0.3125rem;
		color: #333333;
		border-radius:0.3125rem ;
		background-color: #f2f2f2;
		border:0.0625rem solid #d4d4d4;
	}
</style>