JavaScript实现切换多张图片


Posted in Javascript onJanuary 27, 2021

本文实例为大家分享了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>

预览效果:

JavaScript实现切换多张图片

JavaScript实现切换多张图片

JavaScript实现切换多张图片

JavaScript实现切换多张图片

JavaScript实现切换多张图片

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
非常棒的10款jQuery 幻灯片插件
Jun 14 Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
webpack分离css单独打包的方法
Jun 12 Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
原生JS实现萤火虫效果
Mar 07 Javascript
小程序开发之模态框组件封装
Apr 23 Javascript
jquery实现点击左右按钮切换图片
Jan 27 #jQuery
JavaScript实现点击切换功能
Jan 27 #Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 #Javascript
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 #Vue.js
vue实现轮播图帧率播放
Jan 26 #Vue.js
vue 组件基础知识总结
Jan 26 #Vue.js
深入了解Vue动态组件和异步组件
Jan 26 #Vue.js
You might like
与数据库连接
2006/10/09 PHP
PHP新手上路(二)
2006/10/09 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
python实用代码片段收集贴
2015/06/03 Python
浅谈Python的list中的选取范围
2018/11/12 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
深入了解Python enumerate和zip
2020/07/16 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
NFL官方在线商店:NFLShop
2020/07/29 全球购物
大学生学习生活的自我评价
2013/11/01 职场文书
QA工程师岗位职责
2013/11/20 职场文书
优秀大学生推荐信范文
2013/11/28 职场文书
太太口服液广告词
2014/03/20 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
红高粱观后感
2015/06/10 职场文书
换届选举主持词
2015/07/03 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python
pytorch 如何使用float64训练
2021/05/24 Python
python接口测试返回数据为字典取值方式
2022/02/12 Python