我使用jQuery和C＃在页面上显示幻灯片图像。当所有图像都是从C＃代码加载时，就会出现JQuery。
我在页面上有以下三个图像，这些图像是使用c＃动态生成的。
<img id="image1" title="Enjoy a refreshing shower at 43,000 feet" alt="Enjoy a refreshing shower at 43,000 feet" src="/english/images/spa.jpg" style="display: block;">
<img id="image2" title="The comfort of your own Private Suite" alt="The comfort of your own Private Suite" src="/english/images/suites.jpg" style="display: block;">
<img id="image3" title="Socialize, relax, and indulge" alt="Socialize, relax, and indulge" src="/english/images/lounge.jpg" style="display: block;">
现在我想编写C＃代码，它将读取上面的图像并将它们存储在cookie中。并根据cookie值显示图像。
因此，如果我看过第一张图片，那么在下次访问该页面时，它会显示第二张图片，依此类推。在显示最后的图像后，它将首先显示。基本上我希望实现以下逻辑。
"Each image will show in order and a cookie will maintain which image should be shown next. But the image should not change when the user logs in. Also the cookie will be cleared in case any one of the images are changed."
请指导我如何开始，如果我能有一些示例代码，我将不胜感激
谢谢！
用于生成图片和输入隐藏的.NET代码：
protected override void CreateChildControls()
{
// Always start with a clean form
Controls.Clear();
//Declaring the List for image list
List<string> imageList = new List<string>();
//Declaring the Collection object to add the image list
NameValueCollection cookiecollection = new NameValueCollection();
int cntShow = 0;
//Adding DIV4 for prev and next
Panel div4 = new Panel();
//Adding Input Hidden to get all the values from control
HtmlGenericControl inputHidden = new HtmlGenericControl("input");
foreach (FeaturedPromo promo in base.FeaturedPromos)
{
inputHidden = new HtmlGenericControl("input");
inputHidden.Attributes["id"] = promo.ID + "Image";
inputHidden.Attributes["type"] = "hidden";
inputHidden.Attributes["src"] = promo.ImageSource;
inputHidden.Attributes["alt"] = promo.ImageAlt;
inputHidden.Attributes["title"] = promo.ImageTitle;
inputHidden.Attributes["href"] = promo.ImageHref;
inputHidden.Attributes["height"] = promo.ImageHeight;
inputHidden.Attributes["width"] = promo.ImageWidth;
inputHidden.Attributes["header"] = promo.ImageHeader;
inputHidden.Attributes["subheader"] = promo.ImageSubHeader;
inputHidden.Attributes["color"] = promo.ImageColor;
this.Controls.Add(inputHidden);
imageList.Add(promo.ID + "Image");
if (cntShow == 0)
{
//Add specific div for Featured Promo
Panel div1 = new Panel();
div1.Attributes["id"] = promo.ID;
if (cntShow == 0)
{
div1.Style["display"] = "block";
}
else
{
div1.Style["display"] = "none";
}
//Adding an Image
HtmlGenericControl image = new HtmlGenericControl("image");
image.Attributes["src"] = promo.ImageSource;
image.Attributes["alt"] = promo.ImageAlt;
image.Attributes["title"] = promo.ImageTitle;
div1.Controls.Add(image);
//Adding two HREF for navigation
HtmlGenericControl alinkLeft = new HtmlGenericControl("a");
alinkLeft.Attributes["class"] = "slideshow-control-left";
alinkLeft.Attributes["href"] = "javascript:void(0);";
alinkLeft.Style["display"] = "inline";
div1.Controls.Add(alinkLeft);
HtmlGenericControl alinkRight = new HtmlGenericControl("a");
alinkRight.Attributes["class"] = "slideshow-control-right";
alinkRight.Attributes["href"] = "javascript:void(0);";
alinkRight.Style["display"] = "inline";
div1.Controls.Add(alinkRight);
//Adding Second div
Panel div2 = new Panel();
div2.CssClass = "slideshow-b";
div1.Controls.Add(div2);
//Adding Third div
Panel div3 = new Panel();
div3.CssClass = "slideshow-bl";
div2.Controls.Add(div3);
//Adding the A HREF Link
HtmlGenericControl alink = new HtmlGenericControl("a");
alink.Attributes["class"] = "slideshow-link";
alink.Attributes["href"] = promo.ImageHref;
div3.Controls.Add(alink);
//Adding the first span
HtmlGenericControl span1 = new HtmlGenericControl("span");
span1.Attributes["class"] = "slideshow-header";
span1.InnerHtml = promo.ImageHeader;
alink.Controls.Add(span1);
//Adding line break
alink.Controls.Add(new LiteralControl("<br/>"));
//Adding the second span
HtmlGenericControl span2 = new HtmlGenericControl("span");
span2.Attributes["class"] = "slideshow-subheader";
span2.InnerHtml = promo.ImageSubHeader;
alink.Controls.Add(span2);
this.Controls.Add(div1);
if (base.FeaturedPromos.Count > 1)
{
//Adding DIV4 for prev and next
div4 = new Panel();
div4.CssClass = "slideshow-br";
//Adding DIV5 inside DIV4
Panel div5 = new Panel();
div5.CssClass = "slideshow-br-controls";
div4.Controls.Add(div5);
//Adding the PREV A HREF Link
HtmlGenericControl alinkPrev = new HtmlGenericControl("a");
alinkPrev.Attributes["class"] = "slideshow-br-controls-left";
alinkPrev.Attributes["href"] = "javascript:void(0);";
alinkPrev.Attributes["title"] = "Prev";
alinkPrev.Style["display"] = "inline";
alinkPrev.Attributes["CurrentDivID"] = promo.ID;
div5.Controls.Add(alinkPrev);
//Adding the span for prev and next buttons
HtmlGenericControl span3 = new HtmlGenericControl("span");
span3.Attributes["class"] = "slideshow-br-control-buttons";
int count = 0;
foreach (FeaturedPromo allPromo in base.FeaturedPromos)
{
if (count == 0)
{
//Adding the All HREF Link for Prev and Next
HtmlGenericControl aLLlinks = new HtmlGenericControl("a");
aLLlinks.Attributes["class"] = "" + count + "-banner-button";
aLLlinks.Attributes["href"] = "javascript:void(0);";
aLLlinks.Attributes["title"] = allPromo.ImageTitle;
aLLlinks.Style["display"] = "inline";
//aLLlinks.Attributes["id"] = "active-banner-slide";
span3.Controls.Add(aLLlinks);
count++;
}
}
div5.Controls.Add(span3);
//Adding the NEXT A HREF Link
HtmlGenericControl alinkNext = new HtmlGenericControl("a");
alinkNext.Attributes["class"] = "slideshow-br-controls-right";
alinkNext.Attributes["href"] = "javascript:void(0);";
alinkNext.Attributes["title"] = "Next";
alinkNext.Style["display"] = "inline";
alinkNext.Attributes["CurrentDivID"] = promo.ID;
div5.Controls.Add(alinkNext);
//div2.Controls.Add(div4);
}
this.Controls.Add(div1);
//this.Controls.Add(div4);
cntShow++;
}
}
this.Controls.Add(div4);
HttpCookie cookielist = new HttpCookie("ImageListOfCookies");
for (int i = 0; i < imageList.Count; i++)
{
cookiecollection.Add("Image_" + i, imageList[i]);
}
cookielist.Values.Add(cookiecollection);
HttpContext.Current.Response.Cookies.Add(cookielist);
}
答案 0 :(得分：1)
如果你想用Cookies完成它，那么因为你自己首先显示图像，所以你知道将要显示哪些图像，所以不要将链接存储到图像（可能很长）这样做：
为1分配spa.jpg的ID，为2分配suites.jpg或更好的ID，如果文件名始终是唯一的，请更新文件名是身份证。
然后就在您展示图片时，将ID添加到这样的cookie中（我已经使用了|以便于分割并将cookie数量减少到只有一个）。
//For example to store "spa" if spa image has been stored
if(Response.Cookies["Shown_Images"] != null)
{
Response.Cookies["Shown_Images"].Value = Response.Cookies["Shown_Images"] + "|spa";
}
else
{
Response.Cookies["Shown_Images"].Value = "spa";
}
如果spa.jpg已显示
if(Response.Cookies["Shown_Images"] != null)
{
string[] images_shown = Response.Cookies["Shown_Images"];
if(images_shown.Contains("spa"))
{
//If True then do processing;
}
else
{
//False then do as required
}
}
答案 1 :(得分：1)
如果你想用jQuery做这个客户端，你可以使用cookies插件来读/写cookie。下面是一个示例，它将默认设置第一个图像，然后创建一个包含2个值（LastDisplayed，Size）的cookie，以确定下一个要显示的图像。
使用的脚本
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.cookie.js" type="text/javascript"></script>
<script src="Scripts/json2.js" type="text/javascript"></script>
使用的样式
<style type="text/css">
.hide
{
display: none;
}
</style>
使用JavaScript（使用jQuery's Cookie Plugin和JSON.org's JSON2）。
$(document).ready(function () {
// Add class to hide all the images
$('img').addClass('hide');
// Get the cookie to figure out the last image displayed
var cookieval = $.cookie('the_cookie');
if (cookieval != null) {
// Parese cookie value into object
var obj = JSON.parse(cookieval);
// Check if last displayed is less than the total
if (obj.LastDisplayed < obj.Size) {
// Increment Count
obj.LastDisplayed++;
// Show next image
$('img:eq(' + obj.LastDisplayed + ')').removeClass('hide');
} else {
// Reset last displayed to 0
obj.LastDisplayed = 0;
// Show first image
$('img:eq(0)').removeClass('hide');
}
// Update Cookie
$.cookie('the_cookie', JSON.stringify(obj));
} else {
// Show first image
$('img :eq(0)').removeClass('hide');
// Create object to store last displayed and total available
var obj = {};
obj.LastDisplayed = 0;
obj.Size = $('img').length - 1;
// Create the cookie
$.cookie('the_cookie', JSON.stringify(obj));
}
});