jQuery滑块在加载第一张幻灯片时不显示效果

jQuery slider not displaying effects on first slide load

本文关键字:幻灯片 一张 显示 加载 jQuery      更新时间:2023-09-26

我是jQuery的新手,我有一个问题,我相信,对你们中的一些人来说,这将是小菜一碟。:)

我创建了一个自定义的图像滑块,除了一件事之外,它几乎可以像我希望的那样工作。只有在通过所有幻灯片后,才会显示每个幻灯片转换上应该出现的效果。在此之前,它们会立即显示出来——一点效果都没有。

这是JSFiddle链接,代码片段如下。

        $(document).ready(function () {
        var slideHovered = null;
        var slideDuration = 7000;
        var slideEffectDuration = 2500;
        //Initial hiding of inactive slides - is it actually necessary?
        $('.slide:not(.active)').each(function () {
            $(this).css({
                "visibility": "hidden"
            });
        });
        //Check if mouse is hovering over slider
        setInterval(function () {
            slideHovered = $('.leftContentWrapper').is(":hover");
        }, 500);
        //Function to start slideshow
        function startSlides(slideDirection) {
            var slideNumber = $('.slide.active').data('slide');
            var highestSlideNumber = null;
            //Function to find highest slide number
            $('.slide').each(function () {
                var value = parseFloat($(this).attr('data-slide'));
                highestSlideNumber = (value > highestSlideNumber) ? value : highestSlideNumber;
            });
            slideNumber = slideDirection == 'next' ? slideNumber = slideNumber + 1 : slideNumber = slideNumber - 1;
            slideNumber = slideNumber <= 0 ? slideNumber = highestSlideNumber : slideNumber = slideNumber;
            slideNumber = slideNumber > highestSlideNumber ? slideNumber = 1 : slideNumber = slideNumber;
            $('.slide.active').removeClass('active').hide();
            $('[data-slide="' + slideNumber + '"]').addClass('active').fadeIn(slideEffectDuration, function () {});
            $('.slide.active').css({
                'visibility': 'visible'
            });
        }
        //Function to change slide every x seconds if there is no hovering over
        setInterval(function () {
            if (slideHovered === false) {
                startSlides('next');
            } else {
                return false;
            }
        }, slideDuration);
        $('.control').click(function () {
            var slideDirection = $(this).attr('id');
            startSlides(slideDirection);
        });
    });

附言:如有任何额外的代码建议或建议,我们将不胜感激。

您的初始隐藏是个问题,请将其更改为:

            $(this).css({
                "display": "none"
            });