步骤如下： (1) 准备图片(左右箭头,以及一些示例图片) (2) JS(jquery)的代码如下： 复制代码 代码如下: <script type="text/javascript" src="JS/jquery-1.4.4.js"></script> <script type="text/javascript"> var picPath = new Array(); picPath.push("Images/chuang_yhb.jpg"); picPath.push("Images/dong_wgx.jpg"); picPath.push("Images/gao_xsg.jpg"); var index = 0; $(function() { var top = $("#img1").offset().top; var left = $("#img1").offset().left; var height = $("#img1").height(); var width = $("#img1").width(); $("#img1").attr({ "src": picPath[index] }); $("#img1").parent().hover(function() { //show the arrow left and right $("#leftArrow").show(); $("#rightArrow").show(); $("#leftArrow").css({ "left": left - 10, "top": top + (height / 2) }); $("#rightArrow").css({ "left": left + width, "top": top + (height / 2) }); }, function() { //hide the arrrow left and right $("#leftArrow").hide(); $("#rightArrow").hide(); }); $("#leftArrow").click(function() { if (index > 0) { $("#img1").attr({ "src": picPath[--index] }); } }); $("#rightArrow").click(function() { if (index < picPath.length) { $("#img1").attr({ "src": picPath[++index] }); } }); }); </script> (3) Html部分如下： 复制代码 代码如下: <div> <img id="img1" alt="Show Pictures" style="margin-left:100px;" /> <img id="leftArrow" alt="Left Arrow" src="Images/arrowa.jpg" style="position:absolute;display:none;width:50px;height:35px;z-index:99" /> <img id="rightArrow" alt="Right Arrow" src="Images/arrowb.jpg" style="position:absolute;display:none;width:50px;height:35px;z-index:99" /> </div> 下面再附一个js版的 无标题文档 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

　　推荐阅读

　　IE下使用cloneNode注意事项分享

cloneNode 是 HtmlElement 原型链上的方法，用于创建指定 dom 节点的拷贝，它接受一个布尔参数 include_all，如果 include_all 设置为 true，则副本会带有指定节点的所有子节点。 然而，script 标签也是 dom 节点，>>>详细阅读

本文标题：简单的实现点击箭头图片切换的js代码

地址：http://www.17bianji.com/kaifa2/JS/22921.html

 1/2    1