请教js前端控制图片随机展示结果,以下是问题和代码。

设定实现的目标:

     1、每次别人打开网页都是随机展示在五张二维码选一个展示,没有刷新网页就固定显示第一次打开的结果,刷新就更换二维码。(一共五张,12345,) 

     2、当每一张都展示完一次后。就再循环12345

遇到的问题:

     1、我不会后端,只在html弄了一个js随机展示图片。

     2、如果十个人打开依次(或者同时)这个网页,下面的代码就出现 随机展示结果显示不平均。10个结果,序号为1的图片会达到3-4次。

     3、设定的预期效果是:网页上十个人访问的展示的结果,每个二维码平均展示2

预想的解决方案:

    1、方式一:在一定时间内,一分钟或者24小时的周期内,在前面随机展示的基础上通过后台计数判断的方式的方式控制前端应该展示哪一张图片。达到平均展示(不会后端,不知到怎么实现)  
    2、方式二:通过当天零点到当前的时间,是第多少秒判断展示哪张图片(然后发现太复杂了,逻辑都想不通)
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
<title>233</title>
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
<style> 
div{text-align:center;position:relative;margin:auto auto;float:left;} 
p{color:red;font-size:30px;margin:center center;}
</style>
<!--下面的js脚本就是控制随机显示的。-->
<script language="JavaScript">
var basePath="img/";
var baseName="photo";
function change(PhotoNum,Time)
{
var next=Math.floor(Math.random()*PhotoNum)+1;
if
(next>4)
{
next=next-1
}
var nextPhoto=basePath+baseName+next+".jpg";
if
(bgimage.src=="")
{
bgimage.src=nextPhoto;
}
else
{
bgimage.filters.blendTrans.Apply();
bgimage.src=nextPhoto;
bgimage.filters.blendTrans.Play();
}
var express="change("+PhotoNum+","+Time+");";
setTimeout(express,Time);
}
</script>
<!--上面的js脚本就是控制随机显示的。-->
</head>
<body onload="change(5,2000);" >
<div id="div1" style="width='200'"></div>
<div class="zhuti">
<div style="padding-top:100px;">
<p>长按二维码或扫码关注</p>
<img id="bgimage"style="width:65%;z-index:999;border:2px solid #F00;"></div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/script.js"></script>
<script language="JavaScript">
</body>
</html>

通过当前时间戳的秒数来判断展示哪张图片的方法

var t = Math.floor((new Date()).getTime()/1000);
var next = t % PhotoNum + 1;