JavaScript实现简单的图片切换功能(实例代码)

网络编程 2025/10/27 佚名

3 2 1

明霞山资源网 Design By www.htccd.com

代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图片切换</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 200px;
      height: 300px;
      margin: 50px auto;
      padding: 20px;
      background-color: skyblue;
      text-align: center;
    }
    img{
      width: 200px;
      height: 200px;
      margin: 20px 0;
    }
  </style>
  <script>
    // 存储照片地址的数组
    let imgArr = ["https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051704animal1.png", "https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051711animal2.png", "https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051717animal3.png", "https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051722animal4.png", "https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051726animal5.png"];

    // 照片的索引
    let index = 0;
    window.onload = function() {
      let oP = document.getElementsByTagName("p")[0];
      oP.innerHTML = "一共有" + imgArr.length + "张照片,这是第" + (index+1) +"张";

      let oImg = document.getElementsByTagName("img")[0];
      let oPrev = document.getElementsByClassName("prev")[0];
      let oNext = document.getElementsByClassName("next")[0];

      // 点击上一张响应事件
      oPrev.onclick = function () {
        index--;
        //实现照片循环
        if (index < 0) {
          index = imgArr.length-1;
        }
        oP.innerHTML = "一共有" + imgArr.length + "张照片,这是第" + (index+1) +"张";
        oImg.src = imgArr[index];

      };

      // 点击下一张响应事件
      oNext.onclick = function () {
        index++;
        //实现照片循环
        if (index >= imgArr.length) {
          index = 0;
        }
        oP.innerHTML = "一共有" + imgArr.length + "张照片,这是第" + (index+1) +"张";
        oImg.src = imgArr[index];
      };
    };
  </script>
</head>
<body>
  <div class="box">
    <p></p>
    <img src="/UploadFiles/2021-04-02/animal1.png">

最终的效果

总结