js简单dom练习，实现页面的切换

最新推荐文章于 2024-05-07 16:45:26 发布

黎逍遥

最新推荐文章于 2024-05-07 16:45:26 发布

阅读量187

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_53195433/article/details/131026381

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

        #outer{
            width: 500px;
            margin: 50px auto;
            padding: 10px;
            background-color: aqua;
            /* 设置文本居中 */
            text-align: center;
        }
    </style>

    <script>
        window.onload=function(){
            //实现点击按钮更换图片

            //获取img标签
            var img=document.getElementsByTagName("img")[0];

            //创建一个数组用于保存图片路径
            var imgArr=["tupian/1.jpg","tupian/2.jpg","tupian/3.jpg","tupian/4.jpg"]
            
            //创建一个变量用于保存当前正在显示图片的索引
            var index=0;

            //获取id为info的p元素
            var info=document.getElementById("info");

            //设置提示
            info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张"
            
            //获取两个按钮
            var pre=document.getElementById("pre")
            var next=document.getElementById("next")

            //分别为两个按钮绑定点击事件,当点击按钮时储存图片的数组进行自增或自减
            pre.onclick=function(){
                index--;
                if(index<0)
                {
                    index=imgArr.length-1
                }
                img.src=imgArr[index];
                info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张"
                
            };
            next.onclick=function(){
                index++;
                if(index>imgArr.length-1)
                {
                    index=0
                }
                img.src=imgArr[index];
                info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张"
               
            }
           
        }
        
    </script>
</head>
<body>
    <div id="outer">
        <p id="info"></p>
        <img src="tupian/1.jpg" alt="日常保洁">
        <button id="pre">上一张</button>
        <button id="next">下一张</button>
        

    </div>
</body>
</html>