Отображать изображения по порядку, а не случайным образом с помощью JS?

Question

Ниже в блоке кода указан 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;
}

Answer 1

Поместите индекс массива в 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;
}​