如何用js实现图片切换的同时，文字也同时切换

最新推荐文章于 2023-09-08 10:35:31 发布

原创最新推荐文章于 2023-09-08 10:35:31 发布 · 2.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文探讨了如何使用JavaScript在图片切换时同步更新相关文字描述，提供了代码示例并讨论了实现细节。

如何用js实现图片切换的同时，文字也同时切换？

图片切换的实现我会
代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片切换</title>
	<style>
		body {
			text-align: center;
		}
		#bh {
			width: 100%;
			height: 400px;
		}
		#bh> #image {
			display: block;
			width: 700px;
			height: 300px;
			margin: 50px 100px;
			float: left;	
		}
		#bh> p {
			float: left;
			width: 500px;
			height: 300px;
			font-size: 20px;
			margin: 60px 20px 40px;
			line-height: 50px;
			vertical-align: middle;
		}
		button {
			width: 50px;
			height: 20px;
			display: inline-block;
			margin: 20px auto;
		}
		#next {
			
			/*background-image: url("img/k1.jpg");*/
		}
		#prev {
			/*background-image: url("img/k2.jpg");*/
		}
		/*
		#next,#prev {
			width: 50px;
			height: 20px;
		}*/
	</style>
</head>

<body>
	<div id="bh">
	<img src="img/1.jpg" id="image" alt="" />
	<p id="wenzi">又称“万里长城”，是中国古代的军事防御工程，是一道高大、坚固而连绵不断的长垣，用以限隔敌骑的行动。长城不单纯是一道孤立的城墙，而是以城墙为主，同大量的城、障、亭、标相结合的防御体系。著名的典故“烽火戏诸侯”就源于此,长城也是被列入世界文化遗产名录。</p>
	</div>
	<button id="next">next</button>
	<button id="prev">prev</button>
	<!---<img id="next" src="img/k1.jpg" alt="">
	<img id="prev" src="img/k2.jpg" alt="">--->	
	<script>
		var image = document.getElementById('image');
		var next = document.getElementById("next");
		var prev = document.getElementById("prev");
		var nowIndex = 1;
		var count = 5;

		next.onclick =function(){
			nowIndex = nowIndex+1>count?1:nowIndex+1;
			image.src= "img/"+ nowIndex +".jpg";
			
		}
		prev.onclick = function(){
			if(nowIndex-1<=0) {
				nowIndex = count;
			}
			else {
				nowIndex--;
			}
			image.src="img/"+ nowIndex +".jpg";
		}
	</script>
	
</body>
</html>