c# - Web サイトのギャラリー フォームで画像を変更する

Question

約1週間試しましたが、問題を解決できません。私がやりたいことは、基本的に 5 枚または 6 枚の写真をスクロールする Web ページを作成することclicking a next or prev asp:buttonです。誰かがこれを達成する方法をゼロから助けてくれますか?

Visual Studio Web 開発者を使用しており、マスター ページで作成された空白の Web サイトがあります。Default.apsxこのギャラリー関数を自動生成ファイルに追加したいと思います。

私の写真の名前はpic001.jpg; pic002.jpg; pic003.jpg、など

私が欲しいのは、前の画像に移動する左側の「前」というボタンと、次の画像を表示する「次」という右側のボタンと、中央にある画像 (変化するもの) だけです。

この問題を解決してください。私が試してみましたが、ひどく失敗しました。助けてくれる人に感謝します。

これは私の試みのいくつかのコードです:

Default.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];
        }   
     }
}