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 相关文章推荐
jquery限定文本框只能输入数字即整数和小数
Nov 29 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
Feb 25 Javascript
对javascript继承的理解
Oct 11 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
jquery 事件执行检测代码
2009/12/09 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
Javascript中replace()小结
2015/09/30 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
JS作用域深度解析
2016/12/29 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
vue实现轮播图帧率播放
2021/01/26 Vue.js
python实现划词翻译
2020/04/23 Python
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
python交换两个变量的值方法
2019/01/12 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
QML实现钟表效果
2020/06/02 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
小学信息技术教学反思
2014/02/10 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
个性婚礼策划方案
2014/05/17 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS
修改并编译golang源码的操作步骤
2021/07/25 Golang