JavaScript实现简单的图片切换功能(实例代码)


Posted in Javascript onApril 10, 2020

代码如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图片切换</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 200px;
      height: 300px;
      margin: 50px auto;
      padding: 20px;
      background-color: skyblue;
      text-align: center;
    }
    img{
      width: 200px;
      height: 200px;
      margin: 20px 0;
    }
  </style>
  <script>
    // 存储照片地址的数组
    let imgArr = ["https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051704animal1.png", "https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051711animal2.png", "https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051717animal3.png", "https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051722animal4.png", "https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051726animal5.png"];

    // 照片的索引
    let index = 0;
    window.onload = function() {
      let oP = document.getElementsByTagName("p")[0];
      oP.innerHTML = "一共有" + imgArr.length + "张照片,这是第" + (index+1) +"张";

      let oImg = document.getElementsByTagName("img")[0];
      let oPrev = document.getElementsByClassName("prev")[0];
      let oNext = document.getElementsByClassName("next")[0];

      // 点击上一张响应事件
      oPrev.onclick = function () {
        index--;
        //实现照片循环
        if (index < 0) {
          index = imgArr.length-1;
        }
        oP.innerHTML = "一共有" + imgArr.length + "张照片,这是第" + (index+1) +"张";
        oImg.src = imgArr[index];

      };

      // 点击下一张响应事件
      oNext.onclick = function () {
        index++;
        //实现照片循环
        if (index >= imgArr.length) {
          index = 0;
        }
        oP.innerHTML = "一共有" + imgArr.length + "张照片,这是第" + (index+1) +"张";
        oImg.src = imgArr[index];
      };
    };
  </script>
</head>
<body>
  <div class="box">
    <p></p>
    <img src="../../images/animal1.png" alt="">
    <button class="prev">上一张</button>
    <button class="next">下一张</button>
  </div>
</body>
</html>

最终的效果

JavaScript实现简单的图片切换功能(实例代码)

总结

到此这篇关于JavaScript实现简单的图片切换功能(实例代码)的文章就介绍到这了,更多相关js 图片切换内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
Feb 07 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
Feb 13 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
微信小程序表单弹窗实例
Jul 19 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 Javascript
Vue表单控件数据绑定方法详解
Feb 05 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 #Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 #Javascript
javascript实现贪吃蛇经典游戏
Apr 10 #Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 #Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 #Javascript
vue中的过滤器及其时间格式化问题
Apr 09 #Javascript
微信小程序保存图片到相册权限设置
Apr 09 #Javascript
You might like
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
PHP解析html类库simple_html_dom的转码bug
2014/05/22 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
phpinfo的知识点总结
2019/10/10 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
许愿墙中用到的函数
2006/10/07 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
python通过shutil实现快速文件复制的方法
2015/03/14 Python
python使用str &amp; repr转换字符串
2016/10/13 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
深入浅析Python中的yield关键字
2018/01/24 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
python编写俄罗斯方块
2020/03/13 Python
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
手机业务员岗位职责
2013/12/13 职场文书
社区学习十八大感想
2014/01/22 职场文书
股东出资证明书范例
2014/10/04 职场文书
教师党员整改措施
2014/10/24 职场文书
物业工程部岗位职责
2015/02/11 职场文书
城南旧事读书笔记
2015/06/29 职场文书
mysql的Buffer Pool存储及原理
2022/04/02 MySQL
mysql如何查询连续记录
2022/05/11 MySQL