更改网站图库表单中的图片

我已经尝试了大约一个星期了，仍然无法解决我的问题。我想做的是有一个网页，可以滚动浏览5或6张clicking a next or prev asp:button的图片。谁能帮我从头开始怎么实现这个?

我正在使用visual studio web开发人员，并有一个空白的网站与母版页。我想把这个图库函数添加到自动生成的Default.apsx文件中。

我的图片名称是pic001.jpg; pic002.jpg; pic003.jpg等等

我想要的只是在左边有一个按钮，上面写着previous，它会把你带到上一张图片，在右边有一个按钮，上面写着next，它会显示下一张图片中间是一张图片(会改变的那张)

请帮助解决这个问题，我已经尝试过了，失败得相当可怕，非常感谢能帮助我的人

这是我尝试的一些代码:

违约。aspx文件

<%@ Page Title="Default" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default"  %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server" >
    <script src="myJava.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server" >
<table>
    <tr><td> GALLARY </td></tr> <!--Header-->
    <tr>
        <td> <asp:Button ID="Button1" runat="server" Text="Prev" OnClientClick="getPrevImage()"/> </td>
        <td> <img ID="pic" alt="" src="" runat="server" width="400" height="400" /> </td>
        <td> <asp:Button ID="Button2" runat="server" Text="Next" OnClientClick="getNextImage()"/> </td>
    </tr>
</table>
</asp:Content>

Default.aspx.cs文件

public partial class Default : System.Web.UI.Page
{    
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            string script = string.Empty;
            script += "<script language='javascript'>";
            script += "init()";
            script += "</script>";
            ClientScript.RegisterClientScriptBlock(this.GetType(), "Error", script);
        }
    }
}

myJava.js文件

var imagePath = new Array();
var imageIndex = 0;
function init(){
     addPath("pic001.jpg");
     addPath("pic002.jpg");
     addPath("pic003.jpg");
     addPath("pic004.jpg");
     addPath("pic005.jpg");
     getImagePath(0);
}
function addPath(path){
     var index = imagePath.length;
     imagePath[index++] = path;  
}
function getImagePath(index){
     var length = imagePath.length;
     if(index <= length){
        if(index >= 0){
            document.getElementById("MainContent_pic").src = imagePath[index];
            document.getElementById("MainContent_pic").alt = imagePath[index];
            imageIndex = index;
        }
     } else {
        document.getElementById("MainContent_pic").src = "DOES NOT EXIST";
        document.getElementById("MainContent_pic").alt = "DOES NOT EXIST";
     }
}
function getNextImage(){
     var length = imagePath.length;
     var index = imageIndex;
     if(index++ < length--){
        if(imagePath[index] != null){
            imageIndex = index;
            document.getElementById("MainContent_pic").src = imagePath[index];
            document.getElementById("MainContent_pic").alt = imagePath[index];
        }                                    
     }
}
function getPrevImage(){
     var index = imageIndex;
     if(index-- >= 0){
        if(imagePath[index] != null){
            imageIndex = index;
            document.getElementById("MainContent_pic").src = imagePath[index];
            document.getElementById("MainContent_pic").alt = imagePath[index];
        }   
     }
}

<a href="" class="previous">Previous</a>
<img src="1.jpg" class="display"/>
<img src="2.jpg" class="hide"/>
<img src="3.jpg" class="hide"/>
<img src="4.jpg" class="hide"/>
<a href="" class="next">Next</a>

$(document).ready(function(){
    $(.previous).click(function(){
        var current = $(.display);
        //hide current img
        current.attr("class", "hide");
        //get previous img
        var pre = current.pre();
        if(pre !== null)
        {
            //display previous img if available
            pre.atrr("class", "display");
        }
        else
        {
            //dipslay last img if previous not available
            current.parent().find("img:last").attr("class", "display");
        }
    });
    $(.next).click(function(){
        var current = $(.display);
        //hide current img
        current.attr("class", "hide");
        //get next img
        var next = current.next();
        if(next !== null)
        {
            //display next img if available
            next.atrr("class", "display");
        }
        else
        {
            //display first img if next not available
            current.parent().find("img:first").attr("class", "display");
        }
    })
});

img.display {
    display: block;
}
img.hide {
    display: none;
}