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 相关文章推荐
javascript multibox 全选
Mar 22 Javascript
再谈ie和firefox下的document.all属性
Oct 21 Javascript
用jquery方法操作radio使其默认选项是否
Sep 10 Javascript
js获取select选中的option的text示例代码
Dec 19 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
Sea.JS知识总结
May 05 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
vue+moment实现倒计时效果
Aug 26 Javascript
解决layui轮播图有数据不显示的情况
Sep 16 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操作文件方法问答
2007/03/16 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
jQuery的学习步骤
2011/02/23 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
Python数据结构之单链表详解
2017/09/12 Python
简单了解什么是神经网络
2017/12/23 Python
python实现内存监控系统
2021/03/07 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
浅谈python中get pass用法
2019/03/19 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
pyqt5中动画的使用详解
2020/04/01 Python
Python自省及反射原理实例详解
2020/07/06 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
Python用SSH连接到网络设备
2021/02/18 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
4s客服专员岗位职责
2013/12/01 职场文书
搞笑征婚广告词
2014/03/17 职场文书
公司建议书怎么写
2014/05/15 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
企业委托书范本
2014/09/13 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
志愿者个人总结
2015/03/03 职场文书
Python开发五子棋小游戏
2022/04/28 Python