步骤如下：
(1) 准备图片(左右箭头,以及一些示例图片)
(2) js(jquery)的代码如下：
复制代码 代码如下:
<script type="text/javascript" src="JS/jquery-1.4.4.js"></script>
<script type="text/javascript"> <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></script>
(3) Html部分如下：
复制代码 代码如下:
下面再附一个js版的
