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

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

 <img id="icon" src="img/icon_01.png" alt="">

 <button id="prev">上一张</button>

 <button id="next">下一张</button>

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

<script>

window.onload = function () {

        // 1. 获取需要的标签

        var icon = document.getElementById("icon");

        var prev = document.getElementById("prev");

        var next = document.getElementById("next");

        // 2. 监听按钮的点击

        var currentIndex = ;  //默认显示第一张

        prev.onclick = function () {

             currentIndex --;

            icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");

        };

        next.onclick = function () {

             currentIndex ++;

             icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");

        };

    }

</script>

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

var maxIndex = , minIndex = , currentIndex = minIndex;

        prev.onclick = function () {

            if (currentIndex === minIndex){ // 边界值

                currentIndex = maxIndex;

            }else { // 正常情况

                currentIndex --;

            }

            icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");

        };

        next.onclick = function () {

             if (currentIndex === maxIndex){ // 边界值

                 currentIndex = minIndex;

             }else { // 正常情况

                 currentIndex ++;

             }

             icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");

        };

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <img id="icon" src="img/icon_01.png" alt="">

    <button id="prev">上一张</button>

    <button id="next">下一张</button>

<script>

    window.onload = function () {

        // 1. 获取需要的标签

        var icon = document.getElementById("icon");

        var prev = document.getElementById("prev");

        var next = document.getElementById("next");

        // 2. 监听按钮的点击

        var maxIndex = , minIndex = , currentIndex = minIndex;

        prev.onclick = function () {

            if (currentIndex === minIndex){ // 边界值

                currentIndex = maxIndex;

            }else { // 正常情况

                currentIndex --;

            }

            icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");

        };

        next.onclick = function () {

             if (currentIndex === maxIndex){ // 边界值

                 currentIndex = minIndex;

             }else { // 正常情况

                 currentIndex ++;

             }

             icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");

        };

    }

</script>

</body>

</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. MySQL配置参数详解

    # 以下选项会被MySQL客户端应用读取. # 注意只有mysql附带的客户端应用程序保证可以读取这段内容. # 如果你想你自己的MySQL应用程序获取这些值. # 需要在MySQL客户端库初始化的时 ...

  2. python打包成.exe

    pyuic5 mainwindow.ui -o test.py pip install pyinstaller pyinstaller -F -w ***.py https://blog.csdn.n ...

  3. css中的单位px，em和rem的区别

    一.px: px就是像素,用px设置字体大小的时候会比较精确,但是有时候我们会使用不同屏幕尺寸去浏览网页.当页面相应的扩大或者缩小的时候,页面的字体大小就会出现过小或者过大.由于这种问题,就提出了使用 ...

  4. C# 跨线程更新UI界面的适当的处理方式，友好的退出界面的机制探索

    本文主要讲讲C#窗体的程序中一个经常遇到的情况,就是在退出窗体的时候的,发生了退出的异常. 工业软件技术交流群:群1:592132877(满)  群2:948305931     欢迎技术探讨 我们先 ...

  5. 强化学习 平台 openAI 的 gym 安装 （Ubuntu环境下如何安装Python的gym模块）

    openAI 公司给出了一个集成较多环境的强化学习平台  gym , 本篇博客主要是讲它怎么安装. openAI公司的主页: https://www.openai.com/systems/ 从主页上我 ...

  6. Gym - 101550A Artwork (并查集在线做法)

    题目链接 题意:给你一个n*m的网格图,初始时格点全白,每次可以将一段连续的格点涂黑.求出每次操作之后白色连通块的数量. 看了看网上的题解,基本全是离线的做法.其实这道题是有在线的做法的,利用了对偶图 ...

  7. 51Nod：1085 背包问题

    1085 背包问题  基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 在N件物品取出若干件放在容量为W的背包里,每件物品的体积为W1,W2--Wn(Wi为 ...

  8. CentOS安装crontab 定时备份文件夹

    一. 编写脚本编写一个脚本文件,使脚本可以执行备份命令. 例如,将文件目录 /home/backups/balalala 备份到/home目录下,并压缩.1. 创建脚本命令格式: touch 路径/文 ...

  9. cf 295 div 2 B （bfs）

    题意:给出 n.m 两数,可以对 n 进行两种操作 减一或者乘二,操作过程中 n 必须保证非负,问使 n 变为 m 至少需要几步操作. 这是我练水题的时候做到的,题目不难,只是我 bfs 一直没怎么用 ...

  10. java内存的分配和管理

    常用的三个内存空间 栈内存 ,堆内存 ,方法区 栈内存存储的内容: 局部变量. 函数(栈中的局部变量,需要手动赋值.当变量,或者函数执行完毕,就自动被释放) 堆内存,存储的内容 :全局变量.数据容器. ...