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 相关文章推荐
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
BootStrap中
Dec 10 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 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
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
php实现的读取CSV文件函数示例
2017/02/07 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
JavaScript函数详解
2015/02/27 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
Node.js中使用socket创建私聊和公聊聊天室
2015/11/19 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
Python3单行定义多个变量或赋值方法
2018/07/12 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
python生成器推导式用法简单示例
2019/10/08 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
校园餐饮创业计划书
2014/01/10 职场文书
文员求职信
2014/07/15 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
详解Redis实现限流的三种方式
2021/04/27 Redis
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫