Javascript 刷新时图像更改的顺序

编辑：找到错误并修复它，而不是colors.length它应该是image.length。感谢那些帮助过我的人

我用了一段时间的数组，每次刷新页面时都会按顺序更改我博客上的某些图像，但这个数组有问题。例如，当您刷新我的页面时，图像1A、1B和1C将更改为2A、2B和2C，依此类推。在使用这个阵列为我的博客制作了大约4个不同的主题之后，几乎没有问题，我正在制作一个包含6个不同图像的主题，这比我通常使用的要多。这些图像只有一个备用集，因此刷新时，它会在两个集之间来回移动。然而，图像在刷新时已经停止了更改，当主题应该在刷新时更改时，我仍然坚持使用它。有人知道怎么修理吗？我已经附上了我使用过的代码，如果有人能帮助我，我将不胜感激

<script type="text/javascript">

            function refreshSequence() {

            //get current cookie value
            var currentIndex = parseInt(getCookie());

            //get image object
            var myImg = document.getElementById('SidebarIcon');

            //declare image directory path and image array
            var thePath = "https://";
            var theImages = ["31.media.tumblr.com/99731e8e83fb073cf39c9384137d9c1f/tumblr_inline_nesxwvNhwO1ql0f75.png", "31.media.tumblr.com/eb31394be711bc9acaae672d81dc979d/tumblr_inline_nesxx2Ay3R1ql0f75.png"]

            var imgPath = thePath + theImages[currentIndex];
            myImg.src = imgPath;

            //get image object
            var myImg = document.getElementById('SidebarPixel');

            //declare image directory path and image array
            var thePath = "https://";
            var theImages = ["31.media.tumblr.com/3c74b0cddf6eea3b464d2d1a7f34e597/tumblr_inline_nesxwgSnSv1ql0f75.png", "31.media.tumblr.com/de88145e72ccb2987d323f4ff8a607d8/tumblr_inline_nesxl0LzRO1ql0f75.png"]

            var imgPath = thePath + theImages[currentIndex];
            myImg.src = imgPath;

             //get image object
            var myImg = document.getElementById('SidebarGIF');

            //declare image directory path and image array
            var thePath = "http://";
            var theImages = ["static.tumblr.com/v2omgmu/bNEnejyu1/terrabg.gif", "static.tumblr.com/v2omgmu/SoXner1tt/terrabg2.gif"]

            var imgPath = thePath + theImages[currentIndex];
            myImg.src = imgPath;

            //get image object
            var myImg = document.getElementById('SidebarBG');

            //declare image directory path and image array
            var thePath = "http://";
            var theImages = ["static.tumblr.com/v2omgmu/LKZnelu4o/background.png", "http://static.tumblr.com/v2omgmu/1DTnesy9e/backgroundthang.png"]

            var imgPath = thePath + theImages[currentIndex];
            myImg.src = imgPath;

            //get image object
            var myImg = document.getElementById('NavIcon');

            //declare image directory path and image array
            var thePath = "https://";
            var theImages = ["31.media.tumblr.com/7b5bc574d9d829df1091687ed4fda3af/tumblr_inline_nesxxnEn5S1ql0f75.png", "31.media.tumblr.com/c083dc983293f5f37d5f827c636ca93f/tumblr_inline_nesxxyNUWz1ql0f75.png"]

            var imgPath = thePath + theImages[currentIndex];
            myImg.src = imgPath;

            //get image object
            var myImg = document.getElementById('SideThing');

            //declare image directory path and image array
            var thePath = "http://";
            var theImages = ["static.tumblr.com/v2omgmu/bgOnesvtn/terrasidething1.png", "static.tumblr.com/v2omgmu/y9nnesvuq/terrasidething2.png"]

            var imgPath = thePath + theImages[currentIndex];
            myImg.src = imgPath;

            //set next cookie index
            currentIndex += 1;
            currentIndex %= colors.length;
            setCookie(currentIndex);
        }

        function setCookie(someint) {
            var now = new Date();
            var addDays = now.getDate() + 7
            now.setDate(addDays); // cookie expires in 7 days
            var theString = 'imgID=' + escape(someint) + ';expires=' + now.toUTCString();
            document.cookie = theString;
        }

        function getCookie() {
            var output = "0";
            if(document.cookie.length > 0) {
                var temp = unescape(document.cookie);
                temp = temp.split(';');
                for(var i = 0; i < temp.length; i++) {
                    if(temp[i].indexOf('imgID') != -1) {
                        temp = temp[i].split('=');
                        output = temp.pop();
                        break;
                    }
                }
            }
            return output;
        }

</script>

<body onload="refreshSequence();">

<img id="SidebarIcon">
<img id="SidebarGIF"> etc etc

函数refreshSequence（）{
//获取当前cookie值
var currentIndex=parseInt（getCookie（））；
//获取图像对象
var myImg=document.getElementById（'SidebarIcon'）；
//声明映像目录路径和映像数组
var thePath=“https://”；
变量图像=[“31.media.tumblr.com/99731e8e83fb073cf39c9384137d9c1f/tumblr_inline_nesxwvNhwO1ql0f75.png”，“31.media.tumblr.com/EB31394BE711BC9ACAE672D81DC979D/tumblr_inline_nesxx2Ay3R1ql0f75.png”]
var imgPath=路径+图像[当前索引]；
myImg.src=imgPath；
//获取图像对象
var myImg=document.getElementById（'SidebarPixel'）；
//声明映像目录路径和映像数组
var thePath=“https://”；
变量图像=[“31.media.tumblr.com/3c74b0cddf6eea3b464d2d1a7f34e597/tumblr_inline_nesxwgSnSv1ql0f75.png”，“31.media.tumblr.com/de88145e72ccb2987d323f4ff8a607d8/tumblr_inline_nesxl0LzRO1ql0f75.png”]
var imgPath=路径+图像[当前索引]；
myImg.src=imgPath；
//获取图像对象
var myImg=document.getElementById（'SidebarGIF'）；
//声明映像目录路径和映像数组
var thePath=“http://”；
var theImages=[“static.tumblr.com/v2omgmu/bnejyu1/terrabg.gif”，“static.tumblr.com/v2omgmu/SoXner1tt/terrabg2.gif”]
var imgPath=路径+图像[当前索引]；
myImg.src=imgPath；
//获取图像对象
var myImg=document.getElementById（'SidebarBG'）；
//声明映像目录路径和映像数组
var thePath=“http://”；
var theImages=[“static.tumblr.com/v2omgmu/LKZnelu4o/background.png”http://static.tumblr.com/v2omgmu/1DTnesy9e/backgroundthang.png"]
var imgPath=路径+图像[当前索引]；
myImg.src=imgPath；
//获取图像对象
var myImg=document.getElementById（'NavIcon'）；
//声明映像目录路径和映像数组
var thePath=“https://”；
变量图像=[“31.media.tumblr.com/7b5bc574d9d829df1091687ed4fda3af/tumblr\u inline\u nesxxnEn5S1ql0f75.png”，“31.media.tumblr.com/c083dc983293f5f37d5f827c636ca93f/tumblr\u inline\u nesxxynuWQLZ10F75.png”]
var imgPath=路径+图像[当前索引]；
myImg.src=imgPath；
//获取图像对象
var myImg=document.getElementById（'SideThing'）；
//声明映像目录路径和映像数组
var thePath=“http://”；
var theImages=[“static.tumblr.com/v2omgmu/bgOnesvtn/terrasidething1.png”，“static.tumblr.com/v2omgmu/y9nnesvuq/terrasidething2.png”]
var imgPath=路径+图像[当前索引]；
myImg.src=imgPath；
//设置下一个cookie索引
currentIndex+=1；
currentIndex%=colors.length；
setCookie（currentIndex）；
}
函数setCookie（someint）{
var now=新日期（）；
var addDays=now.getDate（）+7
now.setDate（addDays）；//cookie将在7天后过期
var theString='imgID='+escape（someint）+'；expires='+now.toutString（）；
document.cookie=字符串；
}
函数getCookie（）{
var output=“0”；
如果（document.cookie.length>0）{
var temp=unescape（document.cookie）；
临时=临时拆分（“；”）；
对于（变量i=0；i

您多次声明了以下变量

var myImg = document.getElementById('NavIcon');
var thePath = "https://";
var theImages = []
var imgPath = thePath 

因此，将使用最后一个声明。因此，您将不会看到页面刷新。相反，您将始终获得最后声明的图像

您需要重命名变量/更改逻辑

重命名变量，如下所示，应该可以工作

var myImgNavIcon = document.getElementById('NavIcon');
var thePathNavIcon = "https://";
var theImagesNavIcon = []
var imgPathNavIcon = thePath 

var myImgSidebarIcon = document.getElementById('SidebarIcon');
var thePathSidebarIcon = "https://";
var theImagesSidebarIcon = []
var imgPathSidebarIcon = thePath 

编辑：只需重新考虑代码，以提高可重用性。

function setImage(elementId, theImages, currentIndex){
    //get image object
    var myImg = document.getElementById(elementId);

    //declare image directory path and image array
    var thePath = "https://";

    var imgPath = thePath + theImages[currentIndex];
    myImg.src = imgPath;
}

function refreshSequence() {
    //get current cookie value
    var currentIndex = parseInt(getCookie());

    var sideBarImages = ["31.media.tumblr.com/99731e8e83fb073cf39c9384137d9c1f/tumblr_inline_nesxwvNhwO1ql0f75.png", "31.media.tumblr.com/eb31394be711bc9acaae672d81dc979d/tumblr_inline_nesxx2Ay3R1ql0f75.png"]

    var sidebarPixelImages = ["31.media.tumblr.com/3c74b0cddf6eea3b464d2d1a7f34e597/tumblr_inline_nesxwgSnSv1ql0f75.png", "31.media.tumblr.com/de88145e72ccb2987d323f4ff8a607d8/tumblr_inline_nesxl0LzRO1ql0f75.png"]

    var sidebarGIFImages = ["static.tumblr.com/v2omgmu/bNEnejyu1/terrabg.gif", "static.tumblr.com/v2omgmu/SoXner1tt/terrabg2.gif"]

    var sidebarBGImages = ["static.tumblr.com/v2omgmu/LKZnelu4o/background.png", "http://static.tumblr.com/v2omgmu/1DTnesy9e/backgroundthang.png"]

    setImage('SidebarIcon', sideBarImages, currentIndex);
    setImage('SidebarPixel', sidebarPixelImages, currentIndex);
    setImage('SidebarGIF', sidebarGIFImages, currentIndex);
    setImage('SidebarBG', sidebarBGImages, currentIndex);            

    document.body.style.backgroundColor = background;

    //set next cookie index
    currentIndex += 1;
    currentIndex %= colors.length;
    setCookie(currentIndex);
}

---

我还没有测试我的代码。我这样做只是为了给你一个想法。

Chrome开发者工具展示了你的这一行：

document.body.style.backgroundColor = background;

您没有定义变量

background

，因此代码在那里中断。你把这条线移走了。

---

对于cookie操作，最好使用MDN。

您能再解释一下吗？我对HTML/CSS/Java不是很在行，老实说，我现在能得到我所拥有的东西真是个奇迹。啊，那是错误的，我刚才在实际站点中删除了那部分代码，但仍然遇到同样的问题。@tophergasm它在30分钟前就在那里。现在它不在那里了，网站现在看起来运行正常。