js实现图片查询

最新推荐文章于 2021-06-04 16:15:30 发布

lhl-nine

最新推荐文章于 2021-06-04 16:15:30 发布

阅读量363

点赞数

分类专栏： web前端学习

本文链接：https://blog.csdn.net/weixin_43558339/article/details/100799982

版权

web前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        #outer{
            margin:50px;
            padding:10px;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        <!--点击按钮切换图片-->
        window.onload=function(){
            var prev=document.getElementById("prev");
            var nexr=document.getElementById("next");
            var img=document.getElementsByTagName("img")[0];
            var array=["1.jpg","2.jpg"];
            var index=0;
            prev.onclick=function () {
                // alert("上一张");
                index--;
                img.src=array[index];
            }
            next.onclick=function(){
                // alert("下一张");
                index++;
            img.src=array[index];
            }
        }
    </script>
</head>
<body>
<div id="outer">
    <img src="1.jpg">
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
    </div>
</body>
</html>

lhl-nine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现图片查询

<head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ margin:0px; padding:0px; } #oute...
复制链接

扫一扫