我正在做我的自由职业者投资组合,但是遇到了麻烦。我正在尝试制作HTML,CSS和Javascript徽标的渐隐幻灯片。我当前的jQuery代码看起来像this。第一个徽标逐渐消失,但随后停止。我一直在查看我的代码已有一段时间,试图找出问题所在。我对window.setInterval()的工作方式不太了解,但是我想到的一个想法是,在经历1 if语句后,它将重新开始并将shown设置为0。任何帮助将不胜感激。您可以立即查看我的投资组合,here

最佳答案

解决方案很简单,您需要将变量放在函数外部,这使变量成为全局变量。

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();”即可开始操作。

10-05 20:59
查看更多