脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js切换多张图片

JavaScript实现切换多张图片

 更新时间：2021年01月27日 11:13:55   作者：是M  
这篇文章主要为大家详细介绍了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>

预览效果：

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

您可能感兴趣的文章:

相关文章

  • bootstrap模态框消失问题的解决方法

    bootstrap模态框消失问题的解决方法

    这篇文章主要为大家详细整理了bootstrap模态框消失不消失各种问题的解决方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 多个上传文件用js验证文件的格式和大小的方法(推荐)

    多个上传文件用js验证文件的格式和大小的方法(推荐)

    下面小编就为大家带来一篇多个上传文件用js验证文件的格式和大小的方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • JS立即执行函数功能与用法分析

    JS立即执行函数功能与用法分析

    这篇文章主要介绍了JS立即执行函数功能与用法,结合实例形式分析了立即执行函数的相关概念、定义、使用方法及操作注意事项,需要的朋友可以参考下
    2019-01-01
  • javascript格式化json显示实例分析

    javascript格式化json显示实例分析

    这篇文章主要介绍了javascript格式化json显示,实例分析了javascript操作json格式化的相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • JS实现的简单轮播图运动效果示例

    JS实现的简单轮播图运动效果示例

    这篇文章主要介绍了JS实现的简单轮播图运动效果,结合完整实例形式分析了javascript基于定时器动态修改页面元素属性的相关操作技巧,需要的朋友可以参考下
    2016-12-12
  • JS中prototype的用法实例分析

    JS中prototype的用法实例分析

    这篇文章主要介绍了JS中prototype的用法,实例分析了JS中prototype的常见使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • JavaScript实现烟花特效(面向对象)

    JavaScript实现烟花特效(面向对象)

    这篇文章主要为大家详细介绍了JavaScript使用面向对象编程实现烟花特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • JS关于 replace 取值、替换第几个匹配项问题小结

    JS关于 replace 取值、替换第几个匹配项问题小结

    这篇文章主要介绍了JS关于replace取值、替换第几个匹配项,本文针对字符串的替换、截取知识点做详细介绍，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2023-05-05
  • 利用uni-app生成微信小程序的踩坑记录

    利用uni-app生成微信小程序的踩坑记录

    uni-app是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台,这篇文章主要给大家介绍了关于利用uni-app生成微信小程序的踩坑记录,需要的朋友可以参考下
    2022-04-04
  • js学习总结之dom2级事件基础知识详解

    js学习总结之dom2级事件基础知识详解

    这篇文章主要为大家详细介绍了js学习总结之dom2级事件基础知识，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07

最新评论