我已经尝试了大约一个星期,但无法解决我的问题。我想要做的是有一个网页,基本上可以滚动浏览 5 或 6 张图片clicking a next or prev asp:button
。有人可以从头开始帮助我如何实现这一目标。
我正在使用 Visual Studio Web 开发人员,并且有一个使用母版页制作的空白网站。我想将此画廊功能添加到自动生成的Default.apsx
文件中。
我的图片名称是pic001.jpg; pic002.jpg; pic003.jpg
等等
我想要的只是左边的按钮说上一张,它将带你到上一张图片,右边的按钮说下一张,它将显示下一张图片,中间是一张图片(改变的那个)
请帮助解决这个问题,我已经尝试过并且非常失败,非常感谢可以提供帮助的人
这是我尝试的一些代码:
默认.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];
}
}
}