Javascript jQuery:创建一个循环,该循环首先占用一个时间间隔,然后再更改为另一个时间间隔
我有一个在图像之间淡入淡出的循环,其间隔由变量itemInterval设置。像这样:Javascript jQuery:创建一个循环,该循环首先占用一个时间间隔,然后再更改为另一个时间间隔,javascript,jquery,animation,loops,Javascript,Jquery,Animation,Loops,我有一个在图像之间淡入淡出的循环,其间隔由变量itemInterval设置。像这样: // interval between items var itemInterval = 5500; // start loop var infiniteLoop = setInterval(function() { // initial fade out
// interval between items
var itemInterval = 5500;
// start loop
var infiniteLoop = setInterval(function() {
// initial fade out
$('.rotating-item').eq(currentItem).fadeOut(fadeTime);
// set counter
if (currentItem == numberOfItem -1) {
currentItem = 0;
} else {
currentItem++;
}
// next item fade in
$('.rotating-item').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
我真正想做的是,如果有一个初始时间间隔,它只在循环第一次运行时运行,然后有一个第二个时间间隔,它以后每次都运行
因此,当用户打开页面时,第一个交叉淡入淡出非常快,但他们等待下一个图像交叉淡入淡出的时间更长
我是Javascript新手,如果您能编辑我的代码使其正常工作并告诉我您做了什么,我将不胜感激。如果提前感谢您的时间:)您可以尝试使用普通函数而不是匿名函数:
// interval between items
var itemInterval = 5500;
var infiniteLoop;//this contains the id of the interval to be used in clearinterval by the way
setTimeout(function(){
// this code will run only once, one second after the page loads.
myFunc();
infiniteLoop = setInterval(myFunc, itemInterval);
// commence loop that will run forever unless you use clearinterval(infiniteLoop);
}, 1000);
// start loop
function myFunc() {
// this code will run every time the function is called
// initial fade out
$('.rotating-item').eq(currentItem).fadeOut(fadeTime);
// set counter
if (currentItem == numberOfItem -1) {
currentItem = 0;
} else {
currentItem++;
}
// next item fade in
$('.rotating-item').eq(currentItem).fadeIn(fadeTime);
}
通过这种方式,您可以手动调用此函数,然后开始它的间隔。尝试以下操作:
// interval between items
var itemInterval = 5500;
// start loop
var infiniteLoop = setInterval("fadeChange()", itemInterval);
function fadeChange() {
// initial fade out
$('.rotating-item').eq(currentItem).fadeOut(fadeTime);
// set counter
if (currentItem == numberOfItem -1) {
currentItem = 0;
} else {
currentItem++;
}
// next item fade in
$('.rotating-item').eq(currentItem).fadeIn(fadeTime);
}
这将避免最初调用函数,函数应该每5,5秒调用一次。我还没有时间尝试,但它看起来不错。还有谁能发表评论吗?