Question

我正在处理图片滑块。我正在尝试显示当前显示的图像的数量，该图像的不透明度为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')找到有效幻灯片。

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

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

如何在图像滑块中检查哪个图像的不透明度为1？

1 个答案: