javascript - 淡化图像循环 jQuery

Question

我正在制作我的自由职业作品集，但遇到了障碍。我正在尝试制作 HTML、CSS 和 Javascript Logo 的渐变幻灯片。我当前的 jQuery 代码看起来像 this .第一个 Logo 很好地消失了，但随后停止了。我已经查看我的代码一段时间了，试图找出问题所在。我不太了解 window.setInterval() 是如何工作的，但我想到的是，在它通过 1 个 if 语句后，它会重新开始并设置 shown 回到 0。任何帮助将不胜感激。您可以查看我现在的投资组合here .

Answer 1

解决办法很简单，把变量放在函数外面，这样就使变量成为全局变量。

var shown = 0;
$(document).ready(function() {
var slide = function () {
    window.setInterval(function () {
        // var shown = 0;
        shown += 1;
        if (shown === 1) {
            $('#html5').fadeOut(3000);
            $('#css3').fadeIn(3000);
        }
        if (shown === 2) {
            $('#css3').fadeOut(3000);
            $('#java-script').fadeIn(3000);
        }
        if (shown === 3) {
            $('#java-script').fadeOut(3000);
            $('#html5').fadeIn(3000);
            shown = 0; // this resets to 0 and makes you repeat all the animation
        }

        // This code will make a call inside a call of a functions (not recommended)
        // slide();
    }, 5000);
};
slide();
});

设置的间隔每 5000 毫秒(5 秒)调用一次代码，因此您无需再次调用它，只需调用一次函数“slide();”即可开始操作。