遍历数组定时器fadeIn答案

【问题标题】：Iterate through array timer fadeIn遍历数组定时器fadeIn
【发布时间】：2014-01-10 21:41:12
【问题描述】：

编辑：下面是我经过一番折腾后得到的代码。

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

只需要通过以下方式调用它： $('#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));

【问题讨论】：

将其淡入.each。 theCurrentSlide.delay(i*2000).fadeIn()
所以，如果我不理解用例，我深表歉意。因此，您将有（假设 3 个）幻灯片放映。只会出现一张图像（这就是我们想要延迟的原因）？或者这是一种级联的淡入淡出效果，所有图像在页面上一个接一个地淡入淡出？
对不起，这只是一个基本的轮播。图像一个在另一个之上。图像淡入最后一个。他们使用视差布局，并希望中间部分成为轮播）
那么，本质上，1 个幻灯片放映 3 个幻灯片放映？
感谢 Nicholas 最终选择了不同的路线，但非常感谢您的帮助。

标签： javascript jquery arrays

【解决方案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);

你必须调整它以满足你对cs的需求

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

【讨论】：

感谢您最终选择了不同的路线，但非常感谢您的帮助。不过我肯定会在另一个项目中使用它。
我还是不能投票，还没达到最低代表哈哈！我最终想出了我自己的答案更新的 OP...

【解决方案2】：

在each 循环的末尾定位function。在start carousel 函数中使用parameter 来定位需要淡出的each 项目。

...

        playTheCaro($tC);
    });

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

...

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

【讨论】：

我试图将所有内容都保留在函数中，以便我可以同时拥有多个实例。
好吧，你的目标是#caro，所以多个实例一开始就不起作用:-P。那么，您将在同一页面上显示多个幻灯片？
你能把你的 HTML 扔进小提琴里，这样我就可以看到你想要完成什么？
好吧，脚本并没有以相反的方式针对汽车，所以我可以让多个元素使用同一个脚本，这就是为什么我不能简单地调用 div 来淡化。是的，他们希望在同一页面上显示多个幻灯片 =/
我在 OP 中添加了一个小提琴

【解决方案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);

这是一个 FIDDLE http://jsfiddle.net/J73Fu/4/

还有一个问题...如果您遇到这个问题，在重新启动时，第一张幻灯片会使延迟加倍。你怎么能只为第一次迭代设置延迟？

【讨论】：