使用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>