Question

我有一个在图像之间消失的循环，其间隔由变量 itemInterval 设置。像这样：

            // 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很陌生，所以如果你能编辑我的代码使其工作并让我知道你做了什么，我真的很感激。如果您提前感谢您的时间：）

Answer 1

您可以尝试使用普通功能而不是匿名功能：

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

        }

这样，你可以手动调用这个函数，然后开始它的间隔。

Answer 2

试试这个：

// 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秒调用一次该函数。

jQuery：创建一个循环，首先需要一个时间间隔，然后再更改为另一个

2 个答案: