循环访问数组计时器淡入

Question

>编辑：下面是我经过大量混乱后最终得到的代码。

这是一个基本的轮播，可自动设置每张幻灯片的样式，为每个项目提供一个可用于控制内容的类，如果需要，可以选择在悬停时暂停，使用每个div 上的 data 属性设置背景图像，还可以处理同一页面上的多个实例。

只需要通过以下方式调用它：$（'#divName，#divName，#divName'）.startTheCaro（）;

溶液：

(function($) {
$.fn.startTheCaro = function() {
    return this.each(function() {
        var $this = $(this);
        var $thisChild = $this.children();
        var theTransitionSpeed = 500; // Transition Speed
        var theTransitionDelay = 3000; // Amount Of Time Slide Is Shown
        var pauseOnHover = true; // Pause The Slide When Hovered // true or false
        var thisImagePath = 'images/careers/'; // Background Image Path
        var thisSlide = 0;
        var thisSlideNum = 0;
        var hoverPause = false;
        var caroIsPlaying = false;
        var newSlideName = 'thisCaroSlide';
        var theSlidesTotal = $this.children().length-1;
        // Setup each slide
        $this.children().each(function() {
            var $tC = $(this);
            $tC.css('display', 'none');
            var thisDataBgPath = $tC.data('bg');
            // Set styles and classes
            $(this).addClass('thisCaroSlide' + thisSlideNum);
            $tC.css('position', 'absolute');
            $tC.css('top', '0');
            $tC.css('left', '0');
            $tC.css('background', 'url(' + thisImagePath + thisDataBgPath + ') no-repeat top center');
            $tC.css('background-position','center '+((topDist($(this))/$(window).height())*(-1*parAmount))+'px');
            thisSlideNum++;
        });
        var playTheCaro = function() {
            var getTheClass = ('.thisCaroSlide' + thisSlide);
            if (hoverPause == true) {
                // Pause on hover
            } else {
                if (thisSlide == theSlidesTotal) {
                    $this.find(getTheClass).fadeIn(theTransitionSpeed, function(){
                        $this.find('div:not(:first-child, :last-child)').css('display', 'none');
                        thisSlide++;
                    });
                } else if (thisSlide == (theSlidesTotal+1)) {
                    $this.find('.thisCaroSlide' + theSlidesTotal).fadeOut(theTransitionSpeed, function(){
                    });
                    thisSlide = 1;
                } else {
                    $this.find(getTheClass).fadeIn(theTransitionSpeed, function(){
                    });
                    thisSlide++;
                };
            };
        };
        playTheCaro();
        // Pause the Carousel on Hover
        var refreshIntervalId = setInterval(playTheCaro, theTransitionDelay);
        $this.hover(function() {
            if (pauseOnHover == true) {
                refreshIntervalId = clearInterval(refreshIntervalId);
                hoverPause = true;
            }
        }, function() {
            if (pauseOnHover == true) {
                refreshIntervalId = setInterval(playTheCaro, theTransitionDelay);
                hoverPause = false;
            }
        });
    });
};
}(jQuery));

Answer 1

你去吧：

/* the recursion functions */
playTheCaro = function(selector, index, delay, interval) {
    clearInterval(interval);
    console.log(index , selector.length);
    if(index >= selector.length ){
        return;
    }
    interval = setInterval(function() {
        /* the next element in  is $(selector[index]) so you can do what you like with it.*/
        $(selector[index]).fadeIn();
        index++
        playTheCaro(selector, index , delay,interval);
    }, delay);  
};
playTheCaro($('#some li'), 0, 2000);

你必须把它放在满足你的需求ofcs上

您可以在以下位置查看示例： http://jsfiddle.net/J73Fu/2/

Answer 2

在each循环结束时定位function。在start carousel函数中使用parameter来定位需要淡化each项。

。

        playTheCaro($tC);
    });
    playTheCaro = function(thisSlide) {
        setInterval(function() {
            thisSlide.fadeIn();
        }, 2000);
    };

。

在这里小提琴：http://jsfiddle.net/8thVJ/

Answer 3

最终使用了Neta Meta的解决方案，只是需要稍微改变一下。

playTheCaro = function(selector, index, delay, interval) {
    clearInterval(interval);
    interval = setInterval(function() {
        if(index >= selector.length ){
            $('ul li:not(:first-child, :last-child)').css('display', 'none');
            $('ul li:last-child').fadeOut(300, function(){
                index = 0;
            });
        } else {
            $(selector[index]).fadeIn(300);
            index++
            playTheCaro(selector, index , delay,interval);
        }
    }, delay);  
};
$('#some li:first-child').css('display', 'block');
playTheCaro($('#some li'), 0, 2000);

这是一把小提琴http://jsfiddle.net/J73Fu/4/

再问一个问题...如果运行此操作，则在重新启动时，第一张幻灯片会使延迟加倍。如何仅为第一次迭代设置延迟？