1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > 如何用js实现图片切换的同时 文字也同时切换

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

时间:2020-02-01 12:20:03

相关推荐

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

如何用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按钮,如何在左边图片进行切换的时候,对应右边的文字也进行相应的切换”。

在线求大佬解决,谢谢啦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。