Question

我在html文件中使用以下代码。我希望在一段时间后更改图像，它会成功运行，但是当我刷新页面时，它会运行初始页面。我想要的是同样的图像加载等等!!

任何人都可以帮助我？

<head>
    <style>
        #wss {
            opacity: 0;
            webkit-transition:opacity 1.0s linear 0s;
            transition:opacity 1.0s linear 0s;
        }
    </style>
    <script>
        var wss_i = 0;
        var wss_array = ['<img src="img/russia.jpg"> </img>', '<img src="img/germany.jpg"> </img>', '<img src="img/france.jpg"> </img>'];

        function wssNext() {
            wss_i++;
            wss_elem.style.opacity = 0;
            if (wss_i > (wss_array.length - 1)) {
                wss_i = 0;
            }

            setTimeout('wssSlide()', 1000);
        }

        function wssSlide() {
            wss_elem.innerHTML = wss_array[wss_i];
            wss_elem.style.opacity = 1;
            setTimeout('wssNext()', 9000);
        }
    </script>
</head>
<body>
     <h1>My dog is <span id="wss"></span> </h1>

    <script>
        wss_elem = document.getElementById("wss");

        wssSlide();
    </script>
</body>

Answer 1

jsFiddle Demo

说明

以下代码使用Cookie在刷新期间以及关闭浏览器和重新打开时保持您的状态，如果用户清除其Cookie将不再维护，或者在创建Cookie时天数超过您的到期天数变量。

<强> HTML

<h1>My dog is <span id="wss"></span></h1>

<强> CSS

#wss { opacity: 0; webkit-transition:opacity 1.0s linear 0s; transition:opacity 1.0s linear 0s; }

<强> JS

//Global Variables var wss_i=0; var wss_array= ['<img src="http://placehold.it/350x150" />','<img src="http://placehold.it/350x250" />','<img src="http://placehold.it/350x100" />']; //Cookie stuff //Gets the cookie by the name passed, returns null if there isn't a cookie yet function getCookie(c_name) { var c_value = document.cookie; var c_start = c_value.indexOf(" " + c_name + "="); if (c_start == -1) { c_start = c_value.indexOf(c_name + "="); } if (c_start == -1) { c_value = null; } else { c_start = c_value.indexOf("=", c_start) + 1; var c_end = c_value.indexOf(";", c_start); if (c_end == -1) { c_end = c_value.length; } c_value = unescape(c_value.substring(c_start, c_end)); } return c_value; } //Sets a cookie with the name with the value and an expiration number of days function setCookie(c_name, value, exdays) { var exdate = new Date(); exdate.setDate(exdate.getDate() + exdays); var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString()); document.cookie = c_name + "=" + c_value; } //End Cookie Code //Your code function wssSlide(){ wss_elem.innerHTML = wss_array[wss_i]; wss_elem.style.opacity = 1; setTimeout('wssNext()', 9000); } function wssNext() { wss_i++; wss_elem.style.opacity = 0; setCookie('image', wss_i, 365); if(wss_i > (wss_array.length - 1)) { wss_i = 0; } setTimeout('wssSlide()', 1000) ; } //End Your Code //On window.onload, this occurs when the page finishes loading window.onload=function () { //store your wss_elem into the global variable wss_elem = document.getElementById("wss"); //if there is a cookie for this domain with name image get the value if(getCookie('image') != null) { //set global variable wss_i to our cookie value wss_i = getCookie('image'); } //start the slide show wssSlide(); }

停止页面刷新 - 页面刷新后保留页面数据

1 个答案:

jsFiddle Demo