按顺序显示图像而不是使用JS随机显示图像？ [英] Display images in order rather than by random using JS?

问题描述

下面列出的代码块是 Math.random 。我试图在每次页面刷新或重新加载时显示图像。虽然，我知道的唯一方法是以数字方式随机加载它们。问题是，我不希望它们随机加载，我希望它们按照imageArray的顺序加载。有没有一种解决随机函数的方法可以按照数组的顺序显示每个图像？

Listed below in the block of code is Math.random. I'm trying to display images every time the page is refreshed or reloaded. Though, the only way I know is to mathmatically load them randomly. The problem is, I don't want them to load randomly, I want them to load in order of the imageArray. Is there a way around the random function that can display each image in order of the array?

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值。

Put the array index in a cookie or local storage. When the page loads, get the cookie, and increment it (if it's not set this is the first time, so select an image at random). If the increment reaches the size of the array, wrap around to 0. Then display the image with that index. Then save the new cookie value.

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;
}​

这篇关于按顺序显示图像而不是使用JS随机显示图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！