在网页中，经常需要对图片经常各种操作，包括切换，轮播等等，接下来将总结一些常见的图片操作，首先是最简单前后切换。

如上面所示，通过点击右边的按钮切换左边的图片，为了实现想要的效果，首先，我们需要在html中创建一个放照片的容器和两个切换的按钮。

  1.  <img id="icon" src="img/icon_01.png" alt="">
  2.  <button id="prev">上一张</button>
  3.  <button id="next">下一张</button>

然后，我们需要知道当前图片的索引，当点击上一张的时候，索引自减；点击下一张的时候，索引自增。（图片后缀的数字代表当前图片的序号，如果用数组，则可以直接用索引获取图片地址了）

  1. <script>
  2. window.onload = function () {
  3.         // 1. 获取需要的标签
  4.         var icon = document.getElementById("icon");
  5.         var prev = document.getElementById("prev");
  6.         var next = document.getElementById("next");
  7.  
  8.         // 2. 监听按钮的点击
  9.         var currentIndex = ;  //默认显示第一张
  10.         prev.onclick = function () {
  11.              currentIndex --;
  12.             icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");
  13.         };
  14.  
  15.         next.onclick = function () {
  16.              currentIndex ++;
  17.              icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");
  18.         };
  19.     }
  20. </script>

现在，已经可以进行基本的上下切换了，但是图片的数量有限，当切换到最后一张的时候，再点击下一张，就会报错， 在第一张的时候点击上一张也会报错，所以，我们需要设置两个边界值，最大值代表图片的总数量，当到达最大值，再点击下一张时，应该从1开始重新计数；最小值代表1，也是初始化时默认显示的序号，此时点击上一张的时候，应该从最大值重新开始计数。

  1. var maxIndex = , minIndex = , currentIndex = minIndex;
  2.         prev.onclick = function () {
  3.             if (currentIndex === minIndex){ // 边界值
  4.                 currentIndex = maxIndex;
  5.             }else { // 正常情况
  6.                 currentIndex --;
  7.             }
  8.             icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");
  9.         };
  10.  
  11.         next.onclick = function () {
  12.              if (currentIndex === maxIndex){ // 边界值
  13.                  currentIndex = minIndex;
  14.              }else { // 正常情况
  15.                  currentIndex ++;
  16.              }
  17.              icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");
  18.         };

这样，简易的图片切换效果就实现了，完整代码如下：（完整代码下载链接：点这里）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <img id="icon" src="img/icon_01.png" alt="">
  9.     <button id="prev">上一张</button>
  10.     <button id="next">下一张</button>
  11. <script>
  12.     window.onload = function () {
  13.         // 1. 获取需要的标签
  14.         var icon = document.getElementById("icon");
  15.         var prev = document.getElementById("prev");
  16.         var next = document.getElementById("next");
  17.  
  18.         // 2. 监听按钮的点击
  19.         var maxIndex = , minIndex = , currentIndex = minIndex;
  20.         prev.onclick = function () {
  21.             if (currentIndex === minIndex){ // 边界值
  22.                 currentIndex = maxIndex;
  23.             }else { // 正常情况
  24.                 currentIndex --;
  25.             }
  26.             icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");
  27.         };
  28.  
  29.         next.onclick = function () {
  30.              if (currentIndex === maxIndex){ // 边界值
  31.                  currentIndex = minIndex;
  32.              }else { // 正常情况
  33.                  currentIndex ++;
  34.              }
  35.              icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");
  36.         };
  37.     }
  38. </script>
  39. </body>
  40. </html>

JavaScript之图片操作1的更多相关文章

  1. JavaScript之图片操作7

    前面总结了很多了有关于图片操作的案例,本次是基于前面的基础,做一个综合的图片轮播效果,需要实现以下功能: 没有任何操作时,图片自动轮播 鼠标悬浮时,图片停止轮播:当鼠标移开,轮播继续 鼠标悬浮时,出现 ...

  2. JavaScript之图片操作5

    本次的图片操作是要实现模仿天猫淘宝的放大镜效果,如下图所示: 其实现原理其实很简单,主要就是定位的运用,在上面的图中,左边是一个div,它的大小就是左边图片的大小,我们称为左窗口(原图),红色部分我们 ...

  3. JavaScript之图片操作6

    上一篇写的关于放大镜的,可能在实际开发中用的不是很多,接下来将的图片无缝滚动在实际工作中就是用的比较多的了. 如上图,通过定时器控制图片无缝滚动,当鼠标悬浮时停止滚动,鼠标离开,滚动继续. 主要原理是 ...

  4. JavaScript之图片操作3

    在页面布局中,常常会用到九宫格布局,如下图所示: 本次我们就以九宫格为基础进行图片的布局操作,首先我们以上面的图片的为例,假设每个格子的大小都相同,将每一个格子相对其父元素进行定位,这样,我们只需要控 ...

  5. JavaScript之图片操作4

    本次要实现的效果是,在一个盒子里面有一张长图,只显示了一部分,为方便用户浏览,当鼠标移入时,图片开始滚动,将盒子分成上下两部分,当鼠标移入上部分时,图片向上滚动,当鼠标移入下部分时,图片向下滚动. 为 ...

  6. JavaScript之图片操作2

    在前一次,我们实现最简单的图片切换效果,这一次,依旧还是图片切换,具体效果如下: 通过点击下面的小图,上面的大图和标题随之切换.因此,我们需要三个容器分别放标题,大图和小图. <!--大图描述- ...

  7. JavaScript校验图片格式及大小

    <!DOCTYPE html> <html> <head> <title>JavaScript校验图片格式及大小</title> <s ...

  8. 网站开发综合技术 三 JavaScript的DOM操作

    第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...

  9. JavaScript DOM 基础操作

    JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...

随机推荐

  1. 1.2 C++命名空间（namespace）

    参考:http://www.weixueyuan.net/view/6326.html 总结: C++语言引入命名空间(Namespace)这一概念主要是为了避免命名冲突,其关键字为 namespac ...

  2. MyEclipse WebSphere开发教程：WebSphere 8安装指南（二）

    [周年庆]MyEclipse个人授权 折扣低至冰点!立即开抢>> [MyEclipse最新版下载] IBM为使用WebSphere测试应用程序的开发人员提供了免费的WebSphere Ap ...

  3. linux下忘记mysql密码的几种找回方法

    今天我们主要是讲一下关于linux忘记mysql密码处理方法,下面提供了5种linux忘记mysql密码找回方法哦.方法一(先进入root权限):# /etc/init.d/mysql stop# m ...

  4. Zabbix3.4-部署安装

    Zabbix部署安装: 系统环境:CentOS 7 Zabbix版本:Zabbix 3.4 关闭防火墙和SELINUX systemctl stop firewalld && sete ...

  5. c4 L3-001 找零钱 （简单01背包-输出最小字典序解（用vector保存当前最优解））

    #include <iostream> #include <algorithm> #include <vector> #include <cstdio> ...

  6. LOJ2537. 「PKUWC2018」Minimax【概率DP+线段树合并】

    LINK 思路 首先暴力\(n^2\)是很好想的,就是把当前节点概率按照权值大小做前缀和和后缀和然后对于每一个值直接在另一个子树里面算出贡献和就可以了,注意乘上选最大的概率是小于当前权值的部分,选最小 ...

  7. SUST OJ 1641: 电子狗的心事

    1641: 电子狗的心事 时间限制: 1 Sec  内存限制: 128 MB提交: 192  解决: 14[提交][状态][讨论版] 题目描述 计算机程序世界中有一位孤独的电子狗,这个电子狗每次只能执 ...

  8. 定义一组抽象的 Awaiter 的实现接口，你下次写自己的 await 可等待对象时将更加方便

    我在几篇文章中都说到了在 .NET 中自己实现 Awaiter 情况.async / await 写异步代码用起来真的很爽,就像写同步一样.然而实现 Awaiter 没有现成的接口,它需要你按照编译器 ...

  9. C#写的window服务内存溢出

    浅谈c#垃圾回收机制(GC) 写了一个window服务,循环更新sqlite记录,内存一点点稳步增长.三天后,内存溢出.于是,我从自己的代码入手,查找到底哪儿占用内存释放不掉,最终明确是调用servi ...

  10. Fire Game 双向bfs

    Fat brother and Maze are playing a kind of special (hentai) game on an N*M board (N rows, M columns) ...