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

我已经试了大约一个星期了，解决不了我的问题。 我想做的是，通过

单击下一个或上一个asp:按钮，使网页基本上可以滚动浏览5或6张图片。有人能帮我从零开始如何做到这一点吗

我使用的是VisualStudioWebDeveloper，有一个空白的网站，上面有母版页。我想将这个gallary函数添加到自动生成的
Default.apsx
文件中

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

我想要的是左边的一个按钮，前面的按钮会把你带到前面的图像，右边的按钮会显示下一个图片，中间显示的是图片（变化的）

请帮我解决这个问题我试过了但失败得很惨，
非常感谢能帮忙的人

这是我尝试的一些代码：

Default.aspx文件

勇敢的

Default.aspx.cs文件
public部分类默认值：System.Web.UI.Page
{    
受保护的无效页面加载（对象发送方、事件参数e）
{
如果（！IsPostBack）
{
字符串脚本=string.Empty；
脚本+=“”；
脚本+=“init（）”；
脚本+=“”；
RegisterClientScriptBlock（this.GetType（），“Error”，script）；
}
}
}

myJava.js文件
var-imagePath=new-Array（）；
var指数=0；
函数init（）{
addPath（“pic001.jpg”）；
addPath（“pic002.jpg”）；
addPath（“pic003.jpg”）；
addPath（“pic004.jpg”）；
addPath（“pic005.jpg”）；
getImagePath（0）；
}
函数addPath（路径）{
var索引=imagePath.length；
imagePath[index++]=路径；
}
函数getImagePath（索引）{
var length=imagePath.length；
如果（索引=0）{
document.getElementById（“MainContent_pic”）.src=imagePath[index]；
document.getElementById（“MainContent_pic”）.alt=imagePath[index]；
imageIndex=索引；
}
}否则{
document.getElementById（“MainContent_pic”）.src=“不存在”；
document.getElementById（“MainContent\u pic”）.alt=“不存在”；
}
}
函数getNextImage（）{
var length=imagePath.length；
var指数=影像指数；
如果（索引++<长度--）{
if（imagePath[index]！=null）{
imageIndex=索引；
document.getElementById（“MainContent_pic”）.src=imagePath[index]；
document.getElementById（“MainContent_pic”）.alt=imagePath[index]；
}                                    
}
}
函数getPrevImage（）{
var指数=影像指数；
如果（索引-->=0）{
if（imagePath[index]！=null）{
imageIndex=索引；
document.getElementById（“MainContent_pic”）.src=imagePath[index]；
document.getElementById（“MainContent_pic”）.alt=imagePath[index]；
}   
}
}
以下是一个使用html和jquery的方法，您可以在应用程序中轻松使用：

HTMl（您可以随意将
替换为所需的任何标记）：

CSS（您可以将
display:block
更改为
inline
或任何符合您要求的内容）：

我不是专业的html、css、jquery，所以希望这能帮助你添加一些你尝试过的东西。告诉我们一些你迄今为止尝试过的东西，也许是有用的。为什么你需要使用
？这可以通过html+jQuery轻松完成。到目前为止你得到了什么？现有代码有什么问题？理论上看起来应该可以工作，但我对JQuery一无所知。。。我对JavaScript的了解有限。有没有办法用javascript而不是JQuery来实现这一点？我甚至不知道JQuery和JavaScript之间有什么区别。你应该学习一点JQuery，这会让你的生活更轻松。
<%@ 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>

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);
        }
    }
}

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