步骤如下: (1) 准备图片(左右箭头,以及一些示例图片) (2) JS(jquery)的代码如下: 复制代码 代码如下: <br>var picPath = new Array(); <br>picPath.push("Images/chuang_yhb.jpg"); <br>picPath.push("Images/dong_wgx.jpg"); <br>picPath.push("Images/gao_xsg.jpg"); <br>var index = 0; <br>$(function() { <br>var top = $("#img1").offset().top; <br>var left = $("#img1").offset().left; <br>var height = $("#img1").height(); <br>var width = $("#img1").width(); <br>$("#img1").attr({ "src": picPath[index] }); <br>$("#img1").parent().hover(function() { <br>//show the arrow left and right <br>$("#leftArrow").show(); <br>$("#rightArrow").show(); <br>$("#leftArrow").css({ "left": left - 10, "top": top (height / 2) }); <br>$("#rightArrow").css({ "left": left width, "top": top (height / 2) }); <br>}, function() { <br>//hide the arrrow left and right <br>$("#leftArrow").hide(); <br>$("#rightArrow").hide(); <br>}); <br>$("#leftArrow").click(function() { <br>if (index > 0) { <br>$("#img1").attr({ "src": picPath[--index] }); <br>} <br>}); <br>$("#rightArrow").click(function() { <br>if (index < picPath.length) { <br>$("#img1").attr({ "src": picPath[ index] }); <br>} <br>}); <br>}); <br> (3) Html部分如下: 复制代码 代码如下: 下面再附一个js版的