javascript - 褪色图像循环jQuery

Question

我正在制作我的自由职业者投资组合，但我遇到了障碍。我正在尝试制作 HTML、CSS 和 Javascript 徽标的渐变幻灯片。我当前的 jQuery 代码如下所示。第一个标志消失得很好，但随后就停止了。我一直在查看我的代码一段时间，现在试图找出问题所在。我不太了解它是如何window.setInterval()工作的，但我脑海中闪过的一个想法是，在它通过 1 if 语句之后，它会重新开始并shown回到 0。任何帮助将不胜感激。您可以在此处查看我的投资组合。

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

Answer 2

最主要的是你应该只打电话window.setInterval一次。你的代码的结构方式，它被一遍又一遍地调用，这可能不是你想要的。

这是一个未经测试的重写，应该让你走上正确的轨道。

$(document).ready(function() {
    var shown = 0;
    function slide() {
       if (shown === 0) {
           $('#html5').fadeOut(3000);
           $('#css3').fadeIn(3000);
      }
      if (shown === 1) {
          $('#css3').fadeOut(3000);
          $('#java-script').fadeIn(3000);
      }
      if (shown === 2) {
          $('#java-script').fadeOut(3000);
          $('#html5').fadeIn(3000);
      }
      shown = (shown+1)%3;
   }
   slide();
   window.setInterval( slide, 5000);
});