在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 路径
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥30 Matlab打开默认名称带有/的光谱数据
- ¥50 easyExcel模板 动态单元格合并列
- ¥15 res.rows如何取值使用
- ¥15 在odoo17开发环境中,怎么实现库存管理系统,或独立模块设计与AGV小车对接?开发方面应如何设计和开发?请详细解释MES或WMS在与AGV小车对接时需完成的设计和开发
- ¥15 CSP算法实现EEG特征提取,哪一步错了?
- ¥15 游戏盾如何溯源服务器真实ip?需要30个字。后面的字是凑数的
- ¥15 vue3前端取消收藏的不会引用collectId
- ¥15 delphi7 HMAC_SHA256方式加密
- ¥15 关于#qt#的问题:我想实现qcustomplot完成坐标轴
- ¥15 下列c语言代码为何输出了多余的空格