我知道在PHP中,您可以拥有一堆不同的图像,当您离开页面并返回或刷新它时,您会得到不同的图像。是否可以在jQuery中执行此操作?
抱歉,我没有测试代码,我只是不知道从哪里开始
答案 0 :(得分:1)
是的,这是可能的。
假设你想做客户端的一切,我认为你有两个选择。一种是每次随机显示不同的图片。
其次是存储cookie并根据cookie值显示图像。
答案 1 :(得分:1)
你可以做这样简单的事情
var random = Math.floor(Math.random()*3);
if(random == 0){
$('#one').show();
}
if(random == 1){
$('#two').show();
}
if(random == 2){
$('#three').show();
}
(再次单击RUN以查看更改,这与页面重新加载相同,因为这将被称为onLoad)
答案 2 :(得分:1)
如果您想使用cookie方法确保用户永远不会获得相同的两次,我会将您的所有信息都粘贴到json中,如果需要,您可以从ajax请求中获取。
但这对你所需要的东西来说可能太过分了!
示例强>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
//JSON with your image data
var imageJson = {"images": [
{"imgSrc": "image1.jpg", "imgAlt": "Image one"},
{"imgSrc": "image2.jpg", "imgAlt": "Image two"},
{"imgSrc": "image3.jpg", "imgAlt": "Image three"}
]
};
//Wait for dom to load then do our stuff
$(document).ready(function() {
moveCookie();
});
//Name off your cookie
var cookieName = "counteuoi1dff";
//Id off your image tag
var imgId = "img1";
function moveCookie(){
if(getCookie(cookieName) != undefined){
var lastImage = parseInt(getCookie(cookieName));
if(lastImage > imageJson.images.length-1){
setCookie(cookieName,0,365);
lastImage = 0;
}
$("#"+imgId).attr("src",imageJson.images[lastImage].imgSrc);
$("#"+imgId).attr("alt",imageJson.images[lastImage].imgAlt);
setCookie(cookieName,lastImage+1,365);
}else{
setCookie(cookieName,1,365);
lastImage = 1;
}
}
//Default cookie functions for javascript dont worry about these
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
</script>
</head>
<body>
<img src="image1.jpg" alt="Image one" id="img1"/>
</body>
</html>
关闭它的示例是here,只需保持刷新