Question

我正在制作我的Freelance组合，但我遇到了障碍。我正在尝试制作HTML，CSS和Javascript徽标的淡入淡出幻灯片。我当前的jQuery代码看起来像this。第一个徽标消失得很好，但随后停止。我一直在看我的代码一段时间，现在试图弄清楚什么是错的。我不太了解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秒）调用一次代码，因此您不需要再次调用它，只需调用一次函数即可启动操作＆＃34; slide（） ;＆＃34;

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);
});

褪色图像循环jQuery

2 个答案: