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

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

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

php最新面试题_面试问题汇总

php最新面试题_面试问题汇总1、酒店预订怎么实现？怎么设计表你好，我大概的说下我们的业务流程，我们的业务流程是：用户在网站浏览酒店信息，可以根据地区检索出该地区的酒店信息。列表展示酒店的信息由：酒店的名称，酒店图片，酒店位置，评论人数，评论分数以及最低入住价格。用户选中要入住的酒店进入酒店详情页面，查看酒店的介绍以及酒店的房型列表，用户根据他要入住的时间和离店的时间，检索出这个时间段内的所有可选房型（房间数量-当

全栈程序员-站长
2022年8月27日
42
iso qemu 安装ubuntu_ubuntu – Android-x86_64安装程序无法在QEMU / KVM中启动 – 而是显示EFI Shell…

iso qemu 安装ubuntu_ubuntu – Android-x86_64安装程序无法在QEMU / KVM中启动 – 而是显示EFI Shell…我想将它安装到运行在Ubuntu16.0464位上的虚拟机上,UEFI使用QEMU/KVM和virt-manager作为图形前端.安装OVMF并正确配置虚拟机管理程序,作为具有UEFI的Ubuntu测试虚拟机,其虚拟磁盘文件和安装程序映像在同一位置正常工作.但是,当我使用下面转储的设置启动新创建的VM并将下载的Android-x86映像安装到虚拟CD驱动器中时,它不会启动但显示EFISh…

全栈程序员-站长
2022年7月19日
25
使用 Windows Live Writer[通俗易懂]

使用 Windows Live Writer[通俗易懂]导航1.安装2.配置3.使用入门4.技巧1.安装绿色版下载地址：http://www.xdowns.com/soft/1/16/2007/Soft_38256.html2.配置以下内容是配置CSDN博客（其他的BLOG配置自己摸索）：1.在WindowsLiveWriter，点击菜单“日志/添加日志账户”

全栈程序员-站长
2022年10月7日
2
波束形成笔记整理

波束形成笔记整理传统波束形成固定波束形成自适应波束形成依赖目标场景环境噪声特性声场模型假设核心思想当波束从 0 方向入射时两个麦克风采集到的信号之间无延时差语音会叠加增强采集到的噪音会因为延时差不同或相关性低而没有叠加作用从其他方向入射的语音也存在延时差不会被叠加当波束 15 30 入射由于存在无法叠加作用所以 0 比其他入射方向增益大信噪比得到了提升增加其他方向信号时通过调节采集的信号延时差为零来叠加 30 方向的信号波束形成时域方法延

全栈程序员-站长
2025年10月4日
3
Java 二维数组反转「建议收藏」

Java 二维数组反转「建议收藏」通过交换下标实现反转操作：publicclassTestFile{ publicstaticvoidmain(String[]args){ int[][]arr={{1,2,3},{4,5,6},{7,8,9}}; int[][]toarr=newint[3][3]; System.out.println("反转前"); intk=…

全栈程序员-站长
2022年6月11日
55
Carson带你学Android：这是一份详细的 Retrofit使用教程（含实例讲解）[通俗易懂]

前言在Andrroid开发中，网络请求十分常用而在Android网络请求库中，Retrofit是当下最热的一个网络请求库今天，我将献上一份非常详细Retrofitv2.0的使用教程，希望你们会喜欢。如果对Retrofitv2.0的源码感兴趣，可看文章：Android：手把手带你深入剖析Retrofit2.0源码目录![目录](http://upload-

全栈程序员-站长
2022年4月13日
68

发表回复

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