1. <!DOCTYPE html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>图片切换练习</title>
    8.     <style>
    9.         *{
    10.             padding:0;
    11.             margin:0;
    12.         }
    13.         #outer{
    14.             width:1200px;
    15.             height:790px;
    16.             margin:0 auto;
    17.             text-align:center;
    18.             /* overflow:hidden; */
    19.             /* padding:50px; */
    20.             /* background-color:aquamarine; */
    21.         }
    22.         #outer > img{
    23.             width:100%;
    24.         }
    25.     </style>
    26.     <script>
    27.         window.onload = function(){
    29.             // 创建一个数组，用来保存图片的路径
    30.             var imgArr = ["./img/01.jpg","./img/02.jpg","./img/03.jpg","./img/04.jpg","./img/05.jpg","./img/06.jpg"];
    31.             var index = 0;
    32.             var prev = document.getElementById("prev");
    33.             // 要切换图片就是修改　img　标签的 src 属性
    34.             var img = document.getElementsByTagName("img")[0];
    35.             var info = document.getElementById("info");
    36.             info.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
    37.             prev.onclick = function(){
    38.                 // 修改图片路径
    39.                 // img.src = "./img/02.jpg";
    40.                 // 切换上一张，索引自减
    41.                 index--;
    42.                 // 判断索引是否小于0
    43.                 if(index < 0){
    44.                     index = imgArr.length -1;
    45.                 }
    46.                 img.src = imgArr[index];
    47.                 info.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
    48.             };
    50.             var next = document.getElementById("next");
    51.             next.onclick = function(){
    52.                 // img.src = "./img/01.jpg";
    53.                 // 切换下一张，索引自增
    54.                 index++;
    55.                 if(index > imgArr.length-1){
    56.                     index = 0;
    57.                 }
    58.                 img.src = imgArr[index];
    59.                 info.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
    60.                 // 0 - 5
    61.                 // 3 > 6-1 
    62.             };
    63.         };
    64.     </script>
    65. </head>
    66. <body>
    67.     <div id="outer">
    68.         <p id="info"></p>
    69.         <img src="./img/01.jpg" alt="图片">
    70.         <!-- <img src="./img/02.jpg" alt="图片">
    71.         <img src="./img/03.jpg" alt="图片">
    72.         <img src="./img/04.jpg" alt="图片">
    73.         <img src="./img/05.jpg" alt="图片">
    74.         <img src="./img/06.jpg" alt="图片"> -->
    75.         <button id="prev">上一张</button>
    76.         <button id="next">下一张</button>
    77.     </div>
    78. </body>
    79. </html>

    自己试着做一做吧！😀