利用JavaScript实现在网页上图片上一张下一张的操作

全栈程序员-站长 • 2025年12月7日下午1:15 • 未分类 • 阅读 6

利用JavaScript实现在网页上图片上一张下一张的操作代码如下不多废话

<!--实现代码如下--> 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        var imageName =new Array("photoA.jpg","photoB.jpg","photoc.jpg","photod.jpg","photoe.jpg","photof.jpg");
         var foot =1;//设置角标
        window.onload =function(){//匿名函数
           var pbtu =document.getElementById("previousButton");
            var nbtu =document.getElementById("nextButton");
            var img =document.getElementById("img");
            nbtu.addEventListener("click",function(){
                if(foot>=imageName.length){
                    foot =0;
                }
               img.src = "images/" + imageName[foot++];
            },false);
            pbtu.addEventListener("click",function(){
                if(foot<=0){
                    foot =imageName.length-1;
                }
                img.src = "images/" + imageName[foot--];
            },false);


        }
    </script>
</head>
<body>
<scan id="info">
    <img id="img" src="images/photoa.jpg" height="200px" >
</scan>
<div>
    <button id="previousButton"  type="button" >上一张</button>
    <button id="nextButton"   type="button"  value="">下一张</button>
</div>
</body>
</html>



  


  


                                                        版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/231522.html原文链接：https://javaforall.net

赞 (0)

0 0

关于作者

全栈程序员-站长

133.5K 文章

3 粉丝

本网站汇聚当前互联网主流语音，持续更新，欢迎关注公众号“全栈程序员社区”

oracle错误 904,EXP-00008: ORACLE error 904 encountered的解决方法「建议收藏」

上一篇 2025年12月7日下午1:01

miui12免费网络电话没了_小米9电信卡未注册上volte

下一篇 2025年12月7日下午1:22

IP切换器哪个最好用？

IP切换器哪个最好用？首先要回答这个问题需要弄清楚以下几点我们才能更好的判断 ip 是上网的身份唯一标识 IP 切换器即代理服务器是一种重要切换 ip 的安全功能通过中间代理服务器改变你原有的电脑手机 ip 地址去访问你请求的网络地址很好的保护个人信息安全提高网络访问速度有了它之后 Request 信号会先送到代理服务器由代理服务器来取回浏览器所需要的信息并传送给你的浏览器在日常生活中我们使用 IP 切换器大多数是用来连接 INTERNET 国际互联网和 INTRANET 局域网说到 IP 切换器方面的特点这是非常多的

全栈程序员-站长
2026年3月20日
1
最近邻插值、双线性插值、双三次插值

最近邻插值、双线性插值、双三次插值 1.最近邻插值越是简单的模型越适合用来举例子，我们就举个简单的图像：3X3的256级灰度图，也就是高为3个象素，宽也是3个象素的图像，每个象素的取值可以是0－255，代表该像素的亮度，255代表最亮，也就是白色，0代表最暗，即黑色。假如图像的象素矩阵如下图所示（这个原始图把它叫做源图，Source）：234 38 2267 44 1289 65 …

全栈程序员-站长
2022年6月12日
43
Ai程序员

网易版龙虾全代码100%开源

网易版龙虾全代码100%开源

Ai探索者
2026年3月13日
4
部署自己的GitLab

部署自己的GitLab

全栈程序员-站长
2022年3月6日
43
JavaScript中JSON字符串转JSON对象遇到的问题

JavaScript中JSON字符串转JSON对象遇到的问题今天遇到一个奇怪的问题解析二维码后获得了一个 JSON 字符串将 JSON 字符串转换成 JSON 对象的时候报错了报错如下代码如下检查了无数次数据数据是 JSON 字符串引号也都是英文的就是莫名其妙的转换不了最后无奈了终于找到一个解决办法不用 JSON parse xx 转换用 eval xx 方法转换最终解决了这个问题虽然我还是不明白为什么 JSON parse 转换会报错有知道原因的大神吗解决方法数据如下 language ID 98 FA 9B

全栈程序员-站长
2026年3月18日
2
java实训自我总结_java实训个人总结

java实训自我总结_java实训个人总结java 实训个人总结 java 实训个人总结范文实训已经进行两周多了还有一周就要正式结束了突然发现自己似乎又重蹈覆辙了再一次一次的不经意中和某些人的就距离却是越来越来大总是想偷一下懒总是想着马马虎虎过去算了没有那么精打细算过结果不经意有些人人开始脱颖而出有些人开始展露锋芒而我也开始黯淡下去我是想好好学学别人的结果画虎不成反类犬原来我也是不轻易臣服的人我即便不去领导他们也没

全栈程序员-站长
2026年3月18日
3

发表回复

关注全栈程序员社区公众号