图片切换练习

最新推荐文章于 2023-12-24 14:17:15 发布

北冥烟雨

最新推荐文章于 2023-12-24 14:17:15 发布

阅读量109

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/qq_45423800/article/details/118157982

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<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>
        /* 清除默认边距 */
        *{
            margin:0;
            padding:0;
        } 
        #outer{
            width: 2300px;
            margin: 50px auto;
            padding: 20px;
            background-color: darkseagreen;
            text-align: center;
        } 
    </style>
   <script type="text/javascript">
    window.onload=function(){
        /* 获取按钮对象 */
        var prev=document.getElementById("prev");
        var next=document.getElementById("next");
    
        /* 获取img标签 */
        var img = document.getElementsByTagName("img")[0];
        /* 创建一个数组用来保存图片的路径 */
        var imgArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];
        
        /* 创建一个变量，保存当前显示图片的索引 */
        var index=0;
        /* 获取id为info的p元素 */
        var info=document.getElementById("info");
        /* 设置提示文字 */
        info.innerHTML="一共"+imgArr.length+"张图片，现在第"+(index +1)+"张";
        /* 分别为两个按钮绑定单击响应函数 */
        prev.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="img/1.jpg" alt="崩坏三"/>
        
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>
         
</body>
</html>