JavaScript实现切换多张图片

网络编程 2024/12/27 佚名

3 2 1

本文实例为大家分享了JavaScript实现切换多张图片的具体代码，供大家参考，具体内容如下

循环切换图片
HTML+CSS+JavaScript

html部分

<body>
 <div class="outer">
  <p id="info"></p>
  <img src="/UploadFiles/2021-04-02/banner1.png">

css部分


<style>
  * {
   padding: 0;
   margin: 0;
  }

  .outer {
   width: 1000px;
   background-color: #bfa;
   margin: 50px auto;
   text-align: center;
   padding: 10px;
  }

  img {
   width: 900px;
   display: block;
   margin: 0 auto;
  }

  button {
   margin: 5px;
  }
</style>


JavaScript部分
这里用到了JavaScript的DOM对象


<script>
  // 加载文档
  window.onload = function () {
   //获取img标签
   var img = document.getElementsByTagName("img")[0];
   
   //创建一个数组保存所有图片的路径
   //这里设置图片文件的路径
   var imgArr = ["./images/banner1.png", "./images/banner2.png", "./images/banner3.png", "./images/banner4.png", "./images/banner5.png"];
   //设置图片初始值
   var index = 0;
   //获取id为info的p标签
   var info = document.getElementById("info");
   info.innerHTML = "一共" + imgArr.length + "张," + "当前为第" + (index + 1) + "张";

   //绑定两个按钮
   //上一张
   document.getElementById("prev").onclick = function () {
    index--;
    //判断index是否小于0
    if (index < 0) {
     index = imgArr.length - 1;//循环(第一张-》最后一张)
    }
    img.src = imgArr[index];
    info.innerHTML = "一共" + imgArr.length + "张," + "当前为第" + (index + 1) + "张";
   };
   //下一张
   document.getElementById("next").onclick = function () {
    index++;
    //判断index是否大于数组的长度-1(数组的最大下标)
    if (index > imgArr.length - 1) {
     index = 0;//循环(最后一张-》第一张)
    }
    img.src = imgArr[index];
    info.innerHTML = "一共" + imgArr.length + "张," + "当前为第" + (index + 1) + "张";
   }
  };

</script>


预览效果：





以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。