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

梦里梦外; 2023-05-31 02:35 2阅读 0赞

## 如何用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>
    		
    	<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>

我的问题就是“通过button按钮，如何在左边图片进行切换的时候，对应右边的文字也进行相应的切换”。  
**在线求大佬解决，谢谢啦！**