На моем новом сайте я планирую разместить большое изображение героя на главной странице, которое будет меняться при каждом посещении страницы. Код, который у меня есть в данный момент, отображает изображения в фиксированном порядке, и это здорово, когда вы видите их все без повторов циклов.
Однако, это дает немного линейный опыт, и в идеале для этого необходимо, чтобы порядок изображений был перетасован при первом первом посещении, а затем ведет себя так, как указано выше - например:
В настоящее время:
img 1, img 2, img 3 >>> img 1, img 2, img 3 >>> img 1, img 2, img 3 ...
Желаемый эффект после начального перемешивания:
img 2, img 3, img 1 >>> img 2, img 3, img 1 >>> img 2, img 3, img 1 ...
Я попробовал несколько вещей, чтобы попытаться рандомизировать начальный порядок, но я просто не могу получить он «запоминает» его и, как таковой, при каждом повторном посещении / обновлении sh он просто случайным образом рисует изображения в произвольном порядке, в котором используется либо то же изображение, которое было выбрано сразу после, либо повторение изображений до того, как были показаны другие.
Это код, который я сейчас использую:
<img src="/" id="bgim" style="max-width: 100%;">
<script>
if (!document.cookie) {
document.cookie = "picture=0";
}
var cookiesplit = document.cookie.split('=');
var picNum = Math.abs(parseInt(cookiesplit[1]));
if (picNum <= 2) {
picNum += 1;
} else picNum = 1;
document.cookie = "picture=" + picNum;
// Below is where I would like to randomly shuffle the order, BUT then remember that order
var bgim_filenames = ['/user/slide-one.jpg', '/user/slide-two.jpg', '/user/slide-three.jpg'];
var bgim = (bgim_filenames[picNum - 1]);
$('#bgim').attr('src', bgim);
</script>