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 相关文章推荐
JavaScript利用正则表达式去除日期中的“-”
Jul 01 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
Jquery元素追加和删除的实现方法
May 24 Javascript
怎么引入(调用)一个JS文件
May 26 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
Sep 04 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
Angular如何引入第三方库的方法详解
Jul 13 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
微信小程序自定义头部导航栏(组件化)
Nov 15 Javascript
js代码实现轮播图
May 04 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 Smarty date_format [格式化时间日期]
2010/03/15 PHP
.htaccess文件保护实例讲解
2011/02/06 PHP
php中实现记住密码自动登录的代码
2011/03/02 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
JsDom 编程小结
2011/08/09 Javascript
js变换显示图片的实例
2013/04/16 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
python的id()函数解密过程
2012/12/25 Python
Python中的闭包详细介绍和实例
2014/11/21 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
python函数不定长参数使用方法解析
2019/12/14 Python
python中的itertools的使用详解
2020/01/13 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
汽车检测与维修个人求职信
2013/09/24 职场文书
产品发布会策划方案
2014/05/12 职场文书
道路施工安全责任书
2014/07/24 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
退休欢送会致辞
2015/07/31 职场文书
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript