首页 > 解决方案 > 即使在我的页面上执行提交或重置等功能后,如何保持背景图像切换

问题描述

我最近在我的页面中添加了一个 JavaScript 函数,它以 5 秒的间隔切换我的页面的背景图像。该页面中还有一个输入表单,当我单击“提交”按钮时,切换停止并返回到第一个图像,然后重新开始切换。

无论我在该页面中做什么,如何保持背景图像不断切换?

我想我可以用 localStorage 属性解决这个问题,但我不确定如何在这个特定的代码中实现它,有什么想法吗?

<body class="main">
       <div class ="up">
           <img src='images/usa.jpg' id="circle"/>
        </div>

<script>
var image_tracker = 'usa';
function change(){

    var image = document.getElementById('circle');
    if(image_tracker=='usa'){

        image.src = 'images/O_Square_P1.jpg';
        image_tracker = 'uthant';
    }
    else if(image_tracker=='uthant'){

        image.src = 'images/U_Thant_PIC_3.jpg';
        image_tracker = 'oasis';
    }

    else if(image_tracker=='oasis'){

        image.src = 'images/usa.jpg';
        image_tracker= 'usa';
    }
}

var timer = setInterval('change();',5000);
</script>
</body>

标签: javascriptjqueryhtmlcss

解决方案


这取决于您的表单是如何提交/验证的。

您可以通过 AJAX 执行提交/验证。然后你可以阻止你提交事件的默认行为。


推荐阅读