douxingmou4533 2018-11-19 11:29
浏览 52
已采纳

每次用户进入网站时自动从数组加载下一个图像

So this code selects random image whenever a person loads my website, how can I change the code so that images are selected sequentially from first to last everytime a person loads the website and then again resets to first image when the counter reaches the end? P.s- The code works fine on hosting server, here it gives an error i don't know why.

window.onload = choosePic;

var myPix = new Array("https://i.imgur.com/LHtVLbh.jpg", "https://i.imgur.com/2YHazkp.png", "https://i.imgur.com/Uscmgqx.jpg");

function choosePic() {
     var randomNum = Math.floor(Math.random() * myPix.length);
     document.getElementById("myPicture").src = myPix[randomNum];
}
<!DOCTYPE html>
<html>
<head>
     <title>Random Image</title>
     <script src="thumb.js"></script>
</head>
<body>
 <img src="images/spacer.gif" id="myPicture" alt="some image">
</body>
</html>

</div>
  • 写回答

3条回答 默认 最新

  • doubo4336 2018-11-19 11:44
    关注

    You can use localstorage to achieve this. When the user enters the website, you can do something like:

    var pictureIndex = localstorage.getItem("pictureIndex");

    But since it may be the user's first visit, it would be better to have:

    var pictureIndex = localstorage.getItem("pictureIndex") || 0;

    Then, you just increment the pictureIndex and perform a modulo operation (for the case when this is the last image)

    pictureIndex = (pictureIndex + 1) % myPix.length;

    To save this index, you can use

    localStorage.setItem('pictureIndex', pictureIndex);

    Next time when the user refreshes the page (or comes back), he will get the next picture in your array.

    The final code should look like this:

    window.onload = choosePic;

var myPix = new Array("https://i.imgur.com/LHtVLbh.jpg", "https://i.imgur.com/2YHazkp.png", "https://i.imgur.com/Uscmgqx.jpg");

function choosePic() {
     var pictureIndex = window.localStorage.getItem("pictureIndex") || 0;
     pictureIndex = (pictureIndex + 1) % myPix.length;

     window.localStorage.setItem("pictureIndex", pictureIndex);
     document.getElementById("imgid").innerHTML = pictureIndex;
     document.getElementById("myPicture").src = myPix[pictureIndex];
}
    <!DOCTYPE html>
<html>
<head>
     <title>Random Image</title>
     <script src="thumb.js"></script>
</head>
<body>
  Press "Run" multiple times to cycle through the images.
  Currently showing: <span id="imgid"></span>
 <img src="images/spacer.gif" id="myPicture" alt="some image">
</body>
</html>

    Note that the above code might not work here (but you can test it locally) due to some security restrictions from jsfiddle. A working version can be accessed >here<

    </div>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 请教一下各位，为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作