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 相关文章推荐
GreyBox技术总结(转)
Nov 23 Javascript
读jQuery之十二 删除事件核心方法
Jul 31 Javascript
ASP.NET中AJAX 调用实例代码
May 03 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
简易js代码实现计算器操作
Apr 15 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
Nov 12 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
浅谈React碰到v-if
Nov 04 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 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
一些花式咖啡的配方
2021/03/03 冲泡冲煮
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
php 文章调用类代码
2011/08/11 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
ThinkPHP5.1框架数据库链接和增删改查操作示例
2019/08/03 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
2018/03/10 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
Python实现简单的HttpServer服务器示例
2017/09/25 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
关于环保的建议书400字
2014/03/12 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
中小企业员工手册范本
2015/05/14 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
56句经典英文座右铭
2019/08/09 职场文书
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android