点击图片实现上一张下一张JS

点击图片实现上一张下一张JS用 js 实现 点击图片的左边 去上一张 点击图片的右边 去下一张 Jquery 脚本在 http jquery com 下载 Jquery 实现比较简单 nbsp nbsp nbsp document ready function

用js实现。点击图片的左边,去上一张;点击图片的右边,去下一张。

Jquery脚本在http://jquery.com/ 下载

Jquery实现比较简单



    var imageOnclick = function(e, id, preid, nextid) {

        if (e) {

            var cursorper = (parseInt(e.clientX) – $(id).offset().left) / $(id).width();
            if (cursorper < 0.5) {
                if ($(preid).attr(‘href’) != null) {

                    window.location.href = $(preid).attr(‘href’);
                }
            } else {

                if ($(nextid).attr(‘href’) != null) {

                    window.location.href = $(nextid).attr(‘href’);
                }
            }
        } else {

            return false;
        }
    }
















其中:ID为albums的为img对象,ID为preLink的为上一张图片地址的隐藏域(hidden),ID为nextLink的为下一张图片地址的隐藏域(hidden)

两个图片地址是左右箭头图片。

效果:http://www.new0315.com/Image/Display?identifier=87571

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/222041.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月17日 下午4:42
下一篇 2026年3月17日 下午4:42


相关推荐

  • java debug调试怎么用?[通俗易懂]

    java debug调试怎么用?[通俗易懂]我的qq2038373094在做项目的时候,尤其是涉及多个页面的传值的时候,debug调试十分有用,可以迅速帮你找到错误的原因!用debug的好处:1.跟踪变量,可以查看变量的值的变化2.迅速找到错误的原因,节省时间,找错小帮手那么debug调试助手怎么用,用在什么地方?debug用在java程序上,.class文件上面不适合jsp页面,不适合镶嵌在jsp页面…

    2022年10月16日
    3
  • Shell脚本编程规范

    Shell脚本编程规范文章目录一 注释 头部注释 单行注释与多行注释 二 排版规范 1 程序块采用缩进 缩进为 4 个空格 修改 vim 中 Tab 键的距离 2 函数编写 3 命令较长需分行书写 在低优先级操作符处划分新行 用 标识 4 一行只写一条语句 5 逻辑运算符 amp amp 和重定向 管道符前后要留空格 6 一个函数只完成一个功能 且不能超过 100 行 7 case 语句格式 8 注释与上面的代码用空行隔开 三 变量规范 1 变量名由字母 数字 下划线组成 只能以字母 下划线开头 2 尽量减少全局变量

    2026年3月16日
    2
  • 写一个函数,获取一篇文章内容中的全部图片,并下载

    写一个函数,获取一篇文章内容中的全部图片,并下载

    2021年11月4日
    45
  • 摩尔斯电码对应表

    摩尔斯电码对应表对应字母和数字如下 数字对应中文 零壹贰叁肆伍陆柒捌玖

    2026年3月17日
    2
  • UserDetailsService小记

    UserDetailsService小记Resourcepriv 当你采用上面的方式引入 UserDetailsS 时 你需要像下面一样在 Service 中加上名称 因为 UserDetailsS 中会先产生一个 InMemoryUser 它也是 UserDetailsS 的实现类 Spring 选择了 InMemoryUser 这时 U

    2026年3月17日
    1
  • java实现重建二叉树

    java实现重建二叉树题目:输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树。假设输入的前序遍历和中序遍历的结果中都不含重复的数字。例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7,2,1,5,3,8,6},则重建二叉树并返回。思路:根据题目给出的前序遍历、后序遍历数组,首先找出根节点然后再根据中序遍历找到左子树和右子树的长度,分别构造出左右子树的前序遍历和中序遍

    2022年6月13日
    28

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号