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

设计师N程序员

我在这里使用图像滑块。我正在尝试显示正在显示的图像的当前数量,该图像的不透明度为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>

现在假设我在一段时间后有2.jpg的不透明度1,如何检查显示在顶部的不透明度为1的2.jpg?

这是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
    });
});
赫尔曼·特兰(Herman Tran)

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

假设该类为.displayed,则您可以使用来找到活动幻灯片$slides.find('.displayed')

并且当移至新幻灯片时,只需在执行任何必要的动画后删除class属性即可:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在平面列表中为图像背景添加不透明度到可触摸的不透明度?

jQuery图像滑块不透明度

如何创建顶部不透明度为100%,底部不透明度为0%的渐变图像?

如何在MS Word 2007中更改图像的不透明度?

如何在CSS中禁用图像状态下的不透明度

如何在我的传单代码中修改图像的不透明度

如何在图像中制作渐变不透明度?

如何为图像创建不透明度

如何更改背景图像的不透明度?

SwiftUI-如何脉动图像不透明度?

调整JavaFX中图像的不透明度

在Golang中设置图像的不透明度

是否只有在图像的不透明度为1时才能单击?

如何使用CSS为div的背景图像设置不透明度或降低亮度

如何仅将 CSS 中的背景图像设置为不透明度而不是其他任何内容

在CSS中为图像添加圆形褪色不透明度(渐晕效果)

如何在不透明度的图像顶部添加黑色图层?

ListBox.ItemTemplate内部的图像如何在点击时更改不透明度

如何在具有不透明度的图像顶部添加黑色图层

如何更改在KML文档中作为图标导入的图像的不透明度?

如何为网格背景而不是网格中的控件设置图像的不透明度动画?

单击缩略图后,javascript滑块不透明度对主图像的影响

如何在Android中为视图设置不透明度(Alpha)

如何使用Magick ++将具有透明背景的png图像设置为不透明度

将鼠标悬停在图像上时,链接图像的不透明度为0.5,工具提示的不透明度为

在R传单中添加不透明度滑块

如何在js平面中设置不透明度0到1

ionic2:如何设置图像上方的图像不透明度?

降低不透明度的图像对齐