javascript - 如何检查图像 slider 中哪个图像的不透明度为 1 以进行编号？

Question

我正在这里制作图像 slider 。我试图显示当前显示的图像数量，其不透明度为 1，如前面所示。我如何检查图像的不透明度以及如何一次又一次地检查它，以便当下一个图像不透明度为 1 时，显示 Dom 中的图像编号。这是我的代码html

    <div id="Fader" class="fader">
        <img class="slide" src="images/lounge/full/1.jpg" alt="bgImg" />
        <img class="slide" src="images/lounge/full/2.jpg" alt="bgImg" />
        <img class="slide" src="images/lounge/full/3.jpg" alt="bgImg" />
</div>

现在假设我在一段时间后得到了不透明度为 1 的 2.jpg，我如何检查哪一个的不透明度为 1 显示在顶部？谢谢。

这是js代码

(function ($) {
    function prefix(el) {
        var prefixes = ["Webkit", "Moz", "O", "ms"];
        for (var i = 0; i < prefixes.length; i++) {
            if (prefixes[i] + "Transition" in el.style) {
                return '-' + prefixes[i].toLowerCase() + '-';
            };
        };
        return "transition" in el.style ? "" : false;
    };
    var methods = {
        init: function (settings) {
            return this.each(function () {
                var config = {
                    slideDur: 3000,
                    fadeDur: 900
                };
                if (settings) {
                    $.extend(config, settings);
                };
                this.config = config;
                var $container = $(this),
                    slideSelector = '.slide',
                    fading = false,
                    slideTimer,
                    activeSlide,
                    newSlide,
                    $slides = $container.find(slideSelector),
                    totalSlides = $slides.length,
                    $pagerList = $container.find('.pager_list');
                prefix = prefix($container[0]);
                function animateSlides(activeNdx, newNdx) {
                    function cleanUp() {
                        $slides.eq(activeNdx).removeAttr('style');
                        activeSlide = newNdx;
                        fading = false;
                        waitForNext();
                    };
                    if (fading || activeNdx == newNdx) {
                        return false;
                    };
                    fading = true;
                    $pagers.removeClass('active').eq(newSlide).addClass('active');
                    $slides.eq(activeNdx).css('z-index', 3);
                    $slides.eq(newNdx).css({
                        'z-index': 2,
                        'opacity': 1
                    });
                    if (!prefix) {
                        $slides.eq(activeNdx).animate({ 'opacity': 0 }, config.fadeDur,
                        function () {
                            cleanUp();
                        });
                    } else {
                        var styles = {};
                        styles[prefix + 'transition'] = 'opacity ' + config.fadeDur + 'ms';
                        styles['opacity'] = 0;
                        $slides.eq(activeNdx).css(styles);
                        var fadeTimer = setTimeout(function () {
                            cleanUp();
                        }, config.fadeDur);
                    };
                };
                function changeSlides(target) {
                    if (target == 'next') {
                        newSlide = activeSlide + 1;
                        if (newSlide > totalSlides - 1) {
                            newSlide = 0;
                        }
                    } else if (target == 'prev') {
                        newSlide = activeSlide - 1;
                        if (newSlide < 0) {
                            newSlide = totalSlides - 1;
                        };
                    } else {
                        newSlide = target;
                    };
                    animateSlides(activeSlide, newSlide);
                };
                function waitForNext() {
                    slideTimer = setTimeout(function () {
                        changeSlides('next');
                    }, config.slideDur);
                };
                for (var i = 0; i < totalSlides; i++) {
                    $pagerList
                        .append('<li class="page" data-target="' + i + '">' + i + '</li>');
                };
                $container.find('.page').bind('click', function () {
                    var target = $(this).attr('data-target');
                    clearTimeout(slideTimer);
                    changeSlides(target);
                });
                var $pagers = $pagerList.find('.page');
                $slides.eq(0).css('opacity', 1);
                $pagers.eq(0).addClass('active');
                activeSlide = 0;
                waitForNext();
            });
        }
    };
    $.fn.easyFader = function (settings) {
        return methods.init.apply(this, arguments);
    };
})(jQuery);

$(function () {
    $('#Fader').easyFader({
        slideDur: 6000,
        fadeDur: 1000
    });
});

Answer 1

最简单的方法是使用一个具有 opacity: 1.0 属性的 CSS 类，然后确定当前哪张幻灯片具有该类。

假设该类是 .displayed，那么您可以使用 $slides.find('.displayed') 查找事件幻灯片。

当移动到新幻灯片时，只需在执行任何必要的动画后删除类属性即可:

$slides.find('.displayed').animate({opacity: 0}).removeClass('.displayed');