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

HTML中的setCapture和releaseCapture

HTML中的setCapture和releaseCapturesetCapture函数的作用就是将后续的mouse事件都发送给这个对象，releaseCapture就是将鼠标事件还回去，由document、window、object之类的自行来处理。这样就保证了在拖动的过程中，不会由于经过了其它的元素而受到干扰。另外，还有一个很重要的事情是，在Win32上，mousemove的事件不是一个连续的，也就是说，并不是我们每次移动1px的鼠标指针，就会发…

全栈程序员-站长
2022年6月4日
30
2018怎样发英文外链才能提升谷歌排名

2018怎样发英文外链才能提升谷歌排名自从搜索引擎诞生以来，外链一直都是占比较重要的位置，但是谷歌一直在完善算法，让搜索引擎显示更好的搜索结果，2014年以前，通过软件群发外链，会收到不错的效果，但是现在谷歌搜索引擎已经可以识别这些不自然的外链，一旦你的网站再这些群发外链，就会被惩罚，严重的话，被K。我们一直坚守手工做高质量相关性外链，无论谷歌算法如何变，我们的网站一直迄立不倒！那么2018年，我们如何做高质量的相关性英文外链呢？1，…

全栈程序员-站长
2022年5月13日
53
目前主流的nosql数据库有哪些_显示器主流评测

目前主流的nosql数据库有哪些_显示器主流评测oSQL是伴随着web2.0的迅猛发展而在2009年被提出的一个概念，一般可以通俗的理解为高性能的KeyValue存储结构的数据库，当然也有其他更广泛的类型。它基于CAP和BASE理论，强调最终一致性，具有数据结构灵活、扩展方便、大数据量下读写性能高效等特点，在互联网行业被广泛采用。本系列文章将评测广受关注的几个NoSQL数据库产品。本文关注的是HandlerSocketPlugi…

全栈程序员-站长
2022年8月24日
7
String数组初始化

String数组初始化在java中，声明一个数组时，不能直接限定数组长度，只有在创建实例化对象时，才能对给定数组长度.。如下，1，2,3可以通过编译，4，5不行。而String是Object的子类，所以上述BCF均可定义一个存放50个String类型对象的数组。1.Stringa[]=newString[50];2.Stringb[];3.charc[];4.Stringd[50];5.char…

全栈程序员-站长
2022年7月18日
17
c# mysql executenonquery_c#数据四种执行方法（ExecuteNonQuery）

c# mysql executenonquery_c#数据四种执行方法（ExecuteNonQuery）1.使用ExecuteReader()操作数据库2.使用ExecuteNonQuery()操作数据库3.使用ExecuteScalar()操作数据库4.使用DataSet数据集插入记录，更新数据一、使用ExecuteReader()操作数据库，执行查询操作的非常好的方法。ExecuteReader比DataSet而言，DataReader具有较快的访问能力，并且能够使用较少的服务器资源。DataR…

全栈程序员-站长
2025年10月27日
5
MCU_STM32的位带操作 — bit banding[通俗易懂]

MCU_STM32的位带操作 — bit banding[通俗易懂]位带操作STM32芯片除了通用的寄存器访问，还有一个比较有意思的位带操作。这个位带的意思，就是每个比特(bit)位膨胀成一个32位的字(word)，当访问这些字的时候就达到了访问“位”的目的，这就是位带操作！位带操作一个典型的特点，就是把1个位映射到32位，在程序处理中方便操作具体位，典型的如RCC寄存器，需要逐位操作的地方比较多，直接寄存器操作的话，程序的可读性不强；位带操作的缺…

全栈程序员-站长
2022年10月12日
4

发表回复

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