我正在做我的自由职业者投资组合,但是遇到了麻烦。我正在尝试制作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();”即可开始操作。