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

一像素的执着

于 2017-10-27 14:22:00 发布

阅读量3.8k

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/eagle_zcl/article/details/78364463

版权

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

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