简单的实现点击箭头图片切换

这个是一个简单的点击箭头图片切换的例子。JS部分采用过的是jQuery。步骤如下：

(1) 准备图片(左右箭头,以及一些示例图片)

(2) JS的代码如下：

 <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>