Jquery点击数字切换图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> .mouseOver { cursor: hand; border: 1px solid red; } </style> <title></title> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> var imgPaths = ["http://img4.cache.netease.com/sports/2011/2/14/2011021405120433a90.jpg", "http://img3.cache.netease.com/sports/2011/2/14/2011021407333047e73.jpg"]; $(function () { $("#showImg").attr("src", imgPaths[0]); var top; var left; var width; var height; top = $("#showImg").offset().top; left = $("#showImg").offset().left; width = $("#showImg").width(); height = $("#showImg").height(); $("#popDiv").css({ position: "absolute", top: top + height - $("#popDiv").height(), left: left + width - $("#popDiv").width(), padding: "1px" }); $("#popDiv span").hover(function () { $(this).addClass("mouseOver"); }, function () { $(this).removeClass("mouseOver") } ).click(function () { $("#showImg").attr("src", imgPaths[eval($(this).text()) - 1]); }); }); </script> </head> <body> <div> <img id="showImg" alt="" height="400" width="300" src="" /> </div> <div id="popDiv" style="width: 300px; height: 20px; text-align: right"> <span>1</span> <span>2</span> </div> </body> </html>
如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!欢迎各位转载,但是未经作者本人同意,转载文章之后必须在文章页面明显位置给出作者和原文连接,否则保留追究法律责任的权利。
因为向往 所以选择了远方
因为无可依靠 所以必须坚强
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥