JavaScript案例（一）：点击按钮切换图片

最新推荐文章于 2023-08-21 13:55:36 发布

@彼岸花

最新推荐文章于 2023-08-21 13:55:36 发布

阅读量1.5k

点赞数

分类专栏： JAVA开发文章标签： javascript java

本文链接：https://blog.csdn.net/weixin_44825185/article/details/115178420

版权

JAVA开发专栏收录该内容

34 篇文章 0 订阅

订阅专栏

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var image = document.getElementById("a");
            var nextbtn = document.getElementById("next");
            var prebtn = document.getElementById("pre");
            var name_arr = ["a","b","c"];
            var min = 0;
            var max = name_arr.length-1;
            var number = min;
            nextbtn.onclick = function () {

                if (number === max){
                  number = min;
                }else {
                    number++;
                }
                    new_path = "./image/"+name_arr[number]+".jpg";
                    image.setAttribute("src",new_path);
            };
            prebtn.onclick = function () {
                if (number === min){
                    number = max;
                }else {
                    number--;
                }
                new_path = "./image/"+name_arr[number]+".jpg";
                image.setAttribute("src",new_path);
            }
        }
    </script>
</head>
<body>
    <img src="./image/a.jpg" alt="" id="a" width="30%"><br>
    <button id="pre">上一张</button>
    <button id="next">下一张</button>
</body>
</html>

结果

点击按钮，图片进行切换
在这里插入图片描述

@彼岸花

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
JavaScript案例（一）：点击按钮切换图片

代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function () { var image = document.getElementById("a"); va
复制链接

扫一扫