weixin_62677884 2022-03-15 22:56 采纳率: 71.4%
浏览 67
已结题

js怎么做出点击按钮更换图片

在java script中,应该用什么代码编写可以实现点击按钮,来改变图片,需要用到什么知识

  • 写回答

2条回答 默认 最新

  • 崽崽的谷雨 2022-03-16 09:44
    关注
    
    <!DOCTYPE html>
    <html lang="en">
     
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                width: 400px;
                height: 200px;
            }
     
            img {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
     
    <body>
        <span id="text"></span>
        <div>
            <img id="img" alt="">
        </div>
        <button id="pret">上一张</button>
        <button id="next">下一张</button>
    </body>
    <script>
        //图片地址数组。我用的网络图。你可以自行替换
        let imgArr = ["https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile03.16sucai.com%2F2016%2F10%2F1100%2F16sucai_p20161004049_098.JPG&refer=http%3A%2F%2Ffile03.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627526069&t=254d86f033e2279617c40b2035e57849",
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Felement_origin_min_pic%2F16%2F10%2F09%2F0257f936320f509.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627526146&t=d429d67bd3e56f8f7ff772debe79aff6"
        ]
     
        let img = document.getElementById("img"); //img标签
        let pret = document.getElementById("pret"); //上一个按钮dom
        let next = document.getElementById("next"); //下一个按钮dom
        let text = document.getElementById("text"); //文字显示
        var i = 0;
        defaultImg(imgArr, img, i, text);
        next.addEventListener("click", () => {
            nextFn(imgArr, img)
        })
        pret.addEventListener("click", () => {
            prextFn(imgArr, img)
        })
        function defaultImg(arr, img, index, text) { //默认的图片  arr-图片数组 。img是图片dom,index-是下标 text-是文字标签dom
            img.src = arr[index];
            text.innerText = `一共是${arr.length}张,当前是第${index + 1}张`
        }
        function prextFn(arr) { //上一张
            if (i == 0) {
                i = arr.length - 1;
                img.src = arr[arr.length - 1];//加上这个就是到了第一张,再次点击就回到最后一张,不想要可以注释
                text.innerText = `一共是${arr.length}张,当前是第${i + 1}张`
                alert("已经是第一张了,在点击就会回到最后一张"); //如果不想这样可以把这三行注释掉
                return
            }
            i--;
            img.src = imgArr[i];
            text.innerText = `一共是${arr.length}张,当前是第${i}张`
        }
        function nextFn(arr) { //下一张
            if (i == arr.length - 1) {
                i = 0;
                img.src = arr[0]; //加上这个就是到了最后一张,再次点击就回到第一张,不想要可以注释
                text.innerText = `一共是${arr.length}张,当前是第${i + 1}张`
                alert("已经是最后一张了,在点击就会回到第一张"); //如果不想这样可以把这三行注释掉
                return
            }
            i++;
            img.src = arr[i];
            text.innerText = `一共是${arr.length}张,当前是第${i + 1}张`
        }
    </script>
     
    </html>
    

    可以参考这个 ,主要就是替换 图片的src 路径

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 3月25日
  • 已采纳回答 3月17日
  • 创建了问题 3月15日

悬赏问题

  • ¥50 swiftui @query 报错
  • ¥50 怎么解决刷卡或扫码后,点击软件输入框,win10屏幕键盘不会自动弹出的问题
  • ¥15 如何使用arcgispro的训练深度模型,发现water和nowater精度为0?(相关搜索:深度学习)
  • ¥20 matlab作业不太懂呀有问题能给个代码吗
  • ¥15 自制电路图为何无法驱动ESP01S?
  • ¥15 前端加access数据库
  • ¥15 ARCGIS 多值提取到点 ERROR 999999
  • ¥15 mysql异常断电, [MY-011971] [InnoDB]
  • ¥15 uni.onBluetoothDeviceFound熄屏不运行
  • ¥15 求PHDA糖尿病并发症数据集,有偿