JavaScript练习（二）——切换图片

最新推荐文章于 2020-11-27 21:38:44 发布

秃头的毛睿

最新推荐文章于 2020-11-27 21:38:44 发布

阅读量107

点赞数

本文链接：https://blog.csdn.net/weixin_45927758/article/details/108390315

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #outer{
            width: 500px;
            height: 300px;
           /*height: 100px;*/
            margin: 50px auto;
            padding: 10px;
            background-color: blueviolet;
            text-align: center;/*文本居中*/
        }
        #img1{
            height: 250px;
            width: 480px;
        }
    </style>

    <script>
        var np=0;
        window.onload=function(){
            var imgarr=["1.jpg","2.jpg","3.jpg","4.jpg"];
            var l=document.getElementById("last");
            var n=document.getElementById("next");
            var img=document.getElementById("img1");
            var info=document.getElementById("ppp");
            l.onclick=function(){
                if(np===0){
                    np=3;
                }else{
                    np=np-1;
                }
                img.src=imgarr[np];
                info.innerHTML="总共四张图片，当前是第"+(np+1)+"张图片";
            }
            n.onclick=function(){
                np=(np+1)%4;
                img.src=imgarr[np];
                info.innerHTML="总共四张图片，当前是第"+(np+1)+"张图片";
            }
        }
    </script>
</head>

<body>
    <div id="outer">
        <p id="ppp">一共四张图片，当前是第1张</p>
        <img src="1.jpg" alt="P1" id="img1">
        <button id="last">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>

</html>

秃头的毛睿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript练习（二）——切换图片

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #outer{ width: 500px; .
复制链接

扫一扫