JS实现点击按钮切换图片_js点击单选框改变图片-CSDN博客

本文链接：https://blog.csdn.net/weixin_58678214/article/details/120886622

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