每次访问更改背景图片

问题描述：

我的网站有大约50张背景图片。我期望做的是每次访问随机向用户展示不同的用户。我的意思是，他们将在访问期间以相同的背景图像浏览网站。每次访问更改背景图片

当他们关闭浏览器并重新访问或返回并稍后访问后，他们会看到一个新的随机背景图像。不需要在他们之前的背景图像上保存任何内容，只需每次新访问该网站时随机添加一个。

不确定这可以用C＃，Javascript，JQuery或CSS完成。

编辑：我使用ASP.net 4.0 C＃为我的web应用程序。谢谢

了解cookie或localStorage的。 – epascarello 2013-05-14 02:24:07

如果是随机的，随便挑一个。 – Xaqron 2013-05-14 02:28:43

@epascarello - '不需要保存任何他们以前的背景图片' – 2013-05-14 02:28:58

答

保留在会话中。当它还没有进入会议时，随机挑选它，只要它们在您的网站上，它就会保持不变 - 下一次他们回来时，他们会得到一个新的。

例如（我的C＃是有点生疏）：

public getBackground (HttpSessionState session) { 
    String bg = (string) session["session.randomBG"]; 
    if (bg == null) { 
     // pick a random BG & store it. 
     bg = "pick one"; 
     session["session.randomBG"] = bg; 
    } 
    return bg; 
}

希望这有助于！

这对我来说随机图像使用一些自定义代码。 – 2013-05-14 19:07:02

谢谢，太好了。 – 2013-05-15 00:39:32

答

var list = [ 
    "/images01.png", 
    "/images02.png", 
... 
]; 

/*background url*/ = list[Math.floor(Math.random()*list.length];

这在访问期间不会保留相同的背景。 – 2013-05-14 02:37:35

答

确实有可能。我将在这里使用伪代码向您展示如何完成。 Java中很快会出现例子。

在每一页的开头：

StartSession() 
If ! SessionVariable[myBackground] then 
    x=Randomize 50 
    SessionVariable[myBackground]="image0" + x + ".jpg" 
endif 

<style> 
body {background-image:url(SessionVariable[myBackground];} 
</style>

确保您使用的样式标签在适当情况下。 SessionVariable [myBackground]是用户创建的。在PHP它应该是这样的：

$_SESSION['myBackground']

最良好的祝愿，

答

不要使用cookies作为注释说明。这只会为发送到服务器的标头消息增加额外的带宽。

取而代之的是，在浏览器中使用本地存储来保存最后使用的图像。新会话开始时，增加此值，并显示下一个图像。

我在项目上使用了jStorage，它工作正常。

您可以将当前显示的图像保存在其浏览器存储中，也可以保存一个会话ID。稍后，您可以检查会话ID是否已更改。如果是这样，则更改为不同的图像。

var image = $.jStorage.get("image", 0); 
var session_id = $.jStorage.get("session", "put current session id here"); 

if(session_id != "current session id") 
{ 
    image = (image < 50) ? 0 : image+1; 
    $.jStorage.set("image",image); 
    $.jStorage.set("session","current session id"); 
} 

// use image to set background

编辑：

不要把这个JavaScript在每个网页。相反，将它放在一个ASP.NET页面中，该页面作为Javascript内容类型进行响应，并通过页面的标题加载它。这样，浏览器上的页面缓存不会影响会话更改时的脚本。

当'sessionStorage'在浏览器中不可用时，您认为'jStorage'使用了什么？ – Ian 2013-05-14 02:55:53

为什么要增加JStorage的重量，复杂性和可能的兼容性问题 - 当会话ID将是什么，30多个字节？我会在这里遵循KISS原则。 – 2013-05-14 03:10:00

答

试试这个功能：

/** 
* Change background image hourly. 
* Name your images with 0.jpg, 1.jpg, ..., 49.jpg. 
*/ 
function getBackground2() { 
    var expires = 3600000, 
     numOfImages = 50, 
     seed = Math.round(Date.now()/expires % numOfImages); 
    return '/path/to/background/' + seed + '.jpg'; 
}

每次访问更改背景图片

相关推荐