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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 Javascript
JavaScript组件开发完整示例
Dec 15 Javascript
浅析Node.js:DNS模块的使用
Nov 23 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
vue项目实战总结篇
Feb 11 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
vue v-model的用法解析
Oct 19 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 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
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
深入理解python对json的操作总结
2017/01/05 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
python文件读写代码实例
2019/10/21 Python
Python程序暂停的正常处理方法
2019/11/07 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
python 调整图片亮度的示例
2020/12/03 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
团队队名口号大全
2014/06/06 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
小学语文教学反思范文
2016/03/03 职场文书
小学教代会开幕词
2016/03/04 职场文书
详解Django的MVT设计模式
2021/04/29 Python
python实现三次密码验证的示例
2021/04/29 Python
Python下opencv库的安装过程及问题汇总
2021/06/11 Python