使用JS按顺序显示图像,而不是随机显示
Display images in order rather than by random using JS?
下面代码块中列出的是Math.random
。每次刷新或重新加载页面时,我都会尝试显示图像。不过,我知道的唯一方法是用数学方法随机加载它们。问题是,我不希望它们随机加载,我希望它们按照imageArray的顺序加载。有没有一种方法可以绕过随机函数,按照数组的顺序显示每个图像?
var imageArray = [
[ 'http://example.com/assets/reporter.png', '<style>body{background-image:url(), -webkit-linear-gradient(#f5eddf 0%, #e3cfad 100%);#image{margin-left:500px;}</style>', '' ],
[ 'http://example.com/assets/chair.png', '<style>body{background-image:url(), -webkit-linear-gradient(#7abbe7 0%, #a7dbfa 100%);}</style>', '' ]
];
function doIt()
{
var rand = Math.floor(Math.random()*imageArray.length);
var html = "<a href='"+imageArray[rand][2]+"'><img src='"+imageArray[rand][0]+"' alt='heder' border='0' align='absmiddle' /></a><div>"+imageArray[rand][1]+"</div>";
document.getElementById("image").innerHTML = html;
}
将数组索引放入cookie或本地存储中。当页面加载时,获取cookie并递增(如果没有设置,这是第一次,所以随机选择一个图像)。如果增量达到数组的大小,则换行为0。然后显示具有该索引的图像。然后保存新的cookie值。
var imageArray = [
[ 'http://example.com/assets/reporter.png', '<style>body{background-image:url(), -webkit-linear-gradient(#f5eddf 0%, #e3cfad 100%);#image{margin-left:500px;}</style>', '' ],
[ 'http://example.com/assets/chair.png', '<style>body{background-image:url(), -webkit-linear-gradient(#7abbe7 0%, #a7dbfa 100%);}</style>', '' ]
];
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);
}
}
}
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 doIt()
{
var rand = getCookie('rand');
if (rand == null) {
rand = Math.floor(Math.random()*imageArray.length);
} else {
rand++;
if (rand >= imageArray.length) {
rand = 0;
}
}
setCookie('rand', rand);
var html = "<a href='"+imageArray[rand][2]+"'><img src='"+imageArray[rand][0]+"' alt='heder' border='0' align='absmiddle' /></a><div>"+imageArray[rand][1]+"</div>";
document.getElementById("image").innerHTML = html;
}
相关文章:
- 单击按钮时显示随机字符串
- 在固定位置显示随机图像
- 通过ID JavaScript显示随机背景图像
- 如何使用CSS在列中显示随机生成的列表
- 如何使用动画css来显示随机赞美
- 显示随机网页
- 如何使用NodeList显示随机图片
- 未显示随机图像
- 在每个页面加载时显示随机 DIV(对于花哨的框模式)
- JavaScript 显示随机图像
- 单击显示随机图像(Javascript)
- 显示随机图像
- 使用 JavaScript 显示随机数量的元素
- 在 HTML 中显示随机的 swf 横幅
- 在推特小部件中显示随机用户个人资料
- Javascript 或 jQuery 在页面刷新时显示随机元素
- 尝试在页面加载时显示随机视频
- Meteor:在事件中显示随机采集对象
- 生成并显示随机消息–JavaScript
- 如何在幻灯片中显示随机图库(无随机图像)