Question

因此，只要有人加载我的网站，此代码都会选择随机图片，我该如何更改代码，以便每次有人加载网站时从头到尾依次选择图像，然后在计数器到达网站时再次重置为第一张图片结束？附言：代码在托管服务器上可以正常工作，在这里出现错误，我不知道为什么。

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>

Answer 1

function choosePic() {
        var local_item = 0;
        if(localStorage.getItem('pic_key')){
            local_item = parseInt(intvlocalStorage.getItem('pic_key'));
        }
        if(local_item >= myPix.length){
            local_item = 0;
        }
        localStorage.setItem('pic_key', local_item + 1);

        document.getElementById("myPicture").src = myPix[local_item];
    }

您可以使用LocalStorage来实现。当用户进入网站时，您可以存储密钥并对其进行递增。

Answer 2

您可以使用localstorage来实现。当用户进入网站时，您可以执行以下操作：

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

但是由于这可能是用户的首次访问，因此最好这样做：

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

然后，您只需增加pictureIndex并执行取模运算（对于这是最后一张图像的情况）

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

要保存此索引，可以使用

localStorage.setItem('pictureIndex', pictureIndex);

下次用户刷新页面（或返回页面）时，他将获得数组中的下一张图片。

最终代码应如下所示：

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>

请注意，由于jsfiddle的一些安全限制，上述代码可能无法在此处工作（但您可以在本地对其进行测试）。可以通过> here << / em>

访问工作版本

Answer 3

使用本地存储来保存所需的数据[例如被访问= 3（同一个人第三次访问您的网站）

您的js代码可以这样实现：

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() {
     if (localStorage.getItem('visited') == null)
     {
         document.getElementById("myPicture").src = myPix[0];
         localStorage.setItem('visited', 1);
     }
     else if (localStorage.getItem('visited') >= myPix.length)
     {
         localStorage.setItem('visited', 0);
         document.getElementById("myPicture").src = myPix[localStorage.getItem('visited')];

     }
     else
     {
         document.getElementById("myPicture").src = myPix[localStorage.getItem('visited')];
         localStorage.setItem('visited', localStorage.getItem('visited') + 1);
     }
}

每次用户进入网站时自动从阵列中加载下一张图像

3 个答案: