JavaScript实现切换多张图片

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

循环切换图片
HTML+CSS+JavaScript

html部分

body>
     div class="outer">
      p id="info">
    /p>
      img src="./images/banner1.png" alt="图片" tITle="图片">
      button id='prev'>
    上一张/button>
      button id='next'>
    下一张/button>
     /div>
    /body>
    

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>
    

预览效果：

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

• 最简单的js图片切换效果实现代码
• 用html+css+js实现的一个简单的图片切换特效
• 一段非常简单的让图片自动切换js代码
• js图片自动切换效果处理代码
• js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
• 纯js实现背景图片切换效果代码
• js实现支持手机滑动切换的轮播图片效果实例
• 简单的实现点击箭头图片切换的js代码
• css图片切换效果代码[不用js]
• JS鼠标滑过图片时切换图片实现思路

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！