js基础_60、图片切换练习 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #outer{
                width: 550px;
                margin: 50px auto;
                background-color: greenyellow;
                height: 450px;
                text-align: center;
            }
            #outer img{
                margin-top: 10px;
                width: 500px;
                height: 350px;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                //存放图片的数组
                var imgarray=["img/303973.jpg","img/308633.jpg","img/311080.jpg","img/312375.jpg","img/323939.jpg"]
                var index=0;//下标
                document.getElementById("p1").innerHTML="当前为第"+(index+1)+"页，总页数为"+imgarray.length;//提示信息
                var prior=document.getElementById('prior');
                prior.onclick=function (){
                    index--;
                    if(index<0){
                        index=imgarray.length-1
                    }
                    document.getElementById("p1").innerHTML="当前为第"+(index+1)+"页，总页数为"+imgarray.length;
                    document.getElementsByTagName("img")[0].src=imgarray[index];
                }
                var next=document.getElementById('next');
                next.onclick=function (){
                    index++;
                    if(index>imgarray.length-1){
                        index=0
                    }
                    document.getElementById("p1").innerHTML="当前为第"+(index+1)+"页，总页数为"+imgarray.length;
                    document.getElementsByTagName("img")[0].src=imgarray[index];
                }
            }
        </script>
    </head>
    <body>
        <div id="outer">
            <p id="p1"></p>
            <img id="imgid" src="img/303973.jpg" alt="冬天" />
            <button id="prior"><上一张</button>
            <button id="next">下一张></button>
        </div>
    </body>
</html>

image

posted @ 2022-03-12 11:21  青仙  阅读(35)  评论(0)    收藏  举报