如何用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>
我的问题就是“通过button按钮，如何在左边图片进行切换的时候，对应右边的文字也进行相应的切换”。
在线求大佬解决，谢谢啦！
630
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
