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 c语言怎么用printf（“\b \b”）与getch（）实现黑框里写入与删除？
  • ¥20 怎么用dlib库的算法识别小麦病虫害
  • ¥15 华为ensp模拟器中S5700交换机在配置过程中老是反复重启
  • ¥15 java写代码遇到问题，求帮助
  • ¥15 uniapp uview http 如何实现统一的请求异常信息提示？
  • ¥15 有了解d3和topogram.js库的吗？有偿请教
  • ¥100 任意维数的K均值聚类
  • ¥15 stamps做sbas-insar，时序沉降图怎么画
  • ¥15 买了个传感器，根据商家发的代码和步骤使用但是代码报错了不会改，有没有人可以看看
  • ¥15 关于#Java#的问题，如何解决？