700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > JS实现点击按钮切换图片

JS实现点击按钮切换图片

时间:2019-07-26 17:44:19

相关推荐

JS实现点击按钮切换图片

使用JavaScript实现点击‘上一张’,‘下一张’循环播放图片,并在头部标识出‘共6张图片,当前第 * 张’,练习代码展示:

接下来先是效果图:

接下来是代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><center><h2>共有6张图片,当前是第1张</h2><img src="images/11.jpg" id="img"><p><input type="button" value="上一张" onclick="shang()"><input type="button" value="下一张" onclick="xia()"></p><script>var images = ["11.jpg", "22.jpg", "33.jpg", "44.jpg", "55.jpg", "66.jpg"]var index = 0;function shang() {if (index === 0) {index = 5;} else {index--;}var h = document.getElementsByTagName("h2")[0];h.innerHTML = "共有6张图片,当前是第" + (index + 1) + "张图片";document.getElementById("img").setAttribute("src", "images/" + images[index])}function xia() {if (index === 5) {index = 0;} else {index++;}var h = document.getElementsByTagName("h2")[0];h.innerHTML = "共有6张图片,当前是第" + (index + 1) + "张图片";document.getElementById("img").setAttribute("src", "images/" + images[index])}</script></body></center></html>

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