改变不透明度的图片

时间:2017-02-19 19:23:56

标签: javascript

我已经构建了一个代码,使用setinterval()每5秒更换一次图片,每当图片发生变化时,使用setinterval()也会显示它的不透明度从0增加到1。 这一切都很好,但有一个问题,我可以找到修复它的方法。问题是,在我启动页面之后,如果我移动到差异标签,如果我在一分钟后回来,那么一切都变得狂热,不透明度增长得太快,而且在图片更改之前会超过一次。 这是代码:

var images = [], x = 0, t = 0, timerid, s = 0;
    images[0] = "Images/" + location.pathname.substring(1, location.pathname.length - 5) + "2.jpg";
    images[1] = "Images/" + location.pathname.substring(1, location.pathname.length - 5) + ".jpg";
    function ChangeOpacity() {
        img = document.getElementById("img");
        s += 0.003;
        t = s.toString();
        img.style.opacity = t;
        if (img.style.opacity>=1) {
            s = 0;
            clearInterval(timerid);
        }
    }

    function SwitchImage() {
        img = document.getElementById("img");
        img.src = images[x];
        img.style.opacity = 0;
        timerid = setInterval('ChangeOpacity()', 1);
        x++;
        if (x >= images.length)
            x = 0;
    }
    function StartFun() {
        setInterval('SwitchImage()', 5000);
    }

2 个答案:

答案 0 :(得分:0)

您可以添加window.onblurwindow.onfocus功能。每次选项卡失去焦点(onblur)时,您可以清除间隔并在选项卡再次聚焦时重新启动它(onfocus)。

October 2006

编辑: 在所有情况下都不需要重新启动间隔。

答案 1 :(得分:0)

任何?请,属于我的高中项目,我必须在星期二之前修好。