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

最新推荐文章于 2023-11-01 16:03:11 发布

一像素的执着

最新推荐文章于 2023-11-01 16:03:11 发布

阅读量3.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/eagle_zcl/article/details/78364463

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现图片轮播的方法。通过定义图片数组并利用按钮控制切换，实现了图片的上一张和下一张浏览功能。代码适用于网页开发中需要展示多张图片的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!--实现代码如下--> 
<!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>