Question

编辑：下面是我经常搞砸的代码。

这是一个基本的轮播，可以自动设置每张幻灯片的样式，为每个项目提供一个可用于控制内容的类，可以选择在需要时暂停，在每个项目上使用数据属性设置背景图像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));

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

你必须将它改变以满足你的需求

您可以在http://jsfiddle.net/J73Fu/2/

上看到一个示例

Answer 2

在function循环结束时定位each。使用parameter函数中的start carousel来定位需要淡化的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);

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

还有一个问题......如果你经历过这个问题，那么在重启时，第一张幻灯片会延迟一倍。如何为第一次迭代设置延迟？

通过数组计时器fadeIn迭代

3 个答案:

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