[英]Changing pictures in a website gallery form
I have tried for about a week now and cannot solve my problem. 我已经尝试了大约一个星期,无法解决我的问题。 What I want to do is have a web page that will basicaly scroll through 5 or 6 pictures by clicking a next or prev asp:button
. 我想要做的是拥有一个网页,该网页基本上会通过clicking a next or prev asp:button
滚动浏览5或6张图片。 Can someone help me from scratch how to achieve this. 有人可以从头开始帮助我如何实现这一目标。
I am using visual studio web developer and have a blank web site made with a master page. 我正在使用Visual Studio Web开发人员,并且使用主页制作了一个空白网站。 I want to add this gallary function to the auto generated Default.apsx
file. 我想将此库函数添加到自动生成的Default.apsx
文件中。
My picture name are pic001.jpg; pic002.jpg; pic003.jpg
我的图片名称是pic001.jpg; pic002.jpg; pic003.jpg
pic001.jpg; pic002.jpg; pic003.jpg
pic001.jpg; pic002.jpg; pic003.jpg
and so forth pic001.jpg; pic002.jpg; pic003.jpg
等
all I want is a button on the left saying previous which will take you to the previous image, a button on the right that says next which will show you the next picture and in the middle is a picture (the one that changes) 我想要的只是左侧的一个按钮,上面有上一张,将您带到上一张图像,右侧的一个按钮,上面则是下一张,它将向您显示下一张图片,中间是一张图片(变化的图片)
Please help with this problem I have tried and failed rather horribly at it, Many thanks to the one who can help 请帮助解决这个问题,我已经尝试并失败了,非常感谢,非常感谢能够提供帮助的人
This is some code of my attempts: 这是我尝试的一些代码:
<%@ 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];
}
}
}
Here are an approaching using html and jquery that you can easy use in your app: 这是使用html和jquery的一种方法,您可以在应用程序中轻松使用它:
HTMl (feel free to replace <a>
with any tag that you want): HTMl(随意将<a>
替换为所需的任何标签):
<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>
Jquery: jQuery:
$(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");
}
})
});
CSS (you can change the display: block
to inline
or anything that suit your requirement): CSS(您可以将display: block
更改为inline
或任何符合您要求的内容):
img.display {
display: block;
}
img.hide {
display: none;
}
I'm not a pro html, css, jquery so hope this somehow help you 我不是专业的html,css,jquery,所以希望这对您有所帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.