Javascript jQuery全屏视频滑块

我正在实现BigVideo.js，一个用于全屏背景视频滑块的jQuery插件。我看到的一个问题是，当页面加载时，第一次单击下一张幻灯片时没有转换。同时，每个页面之间都存在转换。如果您循环回到第一张幻灯片并继续第二次，您将看到幻灯片1和2之间的过渡。 有什么想法吗？演示可在以下位置找到：

HTML

编辑：上一个按钮的代码

       <nav id="prev-btn">
          <a href="#" class="prev-icon"></a>
       </nav>

        // Preivous button click goes to previous div
        $('#prev-btn').on('click', function(e) {
            e.preventDefault();
            if (!isTransitioning) {
                prev();
            }

        });

        function prev() {
            isTransitioning = true;

            // update video index, reset image opacity if starting over
            if (screenIndex === numScreens) {
                $bigImage.css('opacity',1);
                screenIndex = 1;
            } else {
                screenIndex--;
            }

            if (!isTouch) {
                $('#big-video-wrap').transit({'left':'100%'},transitionDur)
            }

            (Modernizr.csstransitions)?
                $('.wrapper').transit(
                    {'left':(100*(screenIndex-1))+'%'},
                    transitionDur,
                    onTransitionComplete):
                onPrevTransitionComplete();
        }

//Preivous按钮单击转到上一个div
$（'prev btn'）。在（'click'，函数（e）上{
e、 预防默认值（）；
if（！isTransitioning）{
prev（）；
}
});
函数prev（）{
isTransitioning=true；
//更新视频索引，如果重新开始，则重置图像不透明度
如果（屏幕索引===numScreens）{
$bigImage.css（'opacity'，1）；
屏幕索引=1；
}否则{
屏幕索引--；
}
如果（！isTouch）{
$（'big video wrap'）.transit（{'left'：'100%}，transitionDur）
}
（现代化、现代化）？
$（'.wrapper'）.transit(
{'left'：（100*（屏幕索引-1））+'%}，
过渡时期，
onTransitionComplete）：
onPrevTransitionComplete（）；
}

您必须为幻灯片0添加一个转换，以便他们可以执行

transit

请尝试添加以下代码：

$('.wrapper').transit({'left':'-0%'},1000);

那么你的脚本应该是这样的

$(function() {

        // Use Modernizr to detect for touch devices, 
        // which don't support autoplay and may have less bandwidth, 
        // so just give them the poster images instead
        var screenIndex = 1,
            numScreens = $('.screen').length,
            isTransitioning = false,
            transitionDur = 1000,
            BV,
            videoPlayer,
            isTouch = Modernizr.touch,
            $bigImage = $('.big-image'),
            $window = $(window);

         //Add------------------------------
         $('.wrapper').transit(
                    {'left':'-0%'},
                    1000);
        //------------------------------------

        if (!isTouch) {
            // initialize BigVideo
            BV = new $.BigVideo({forceAutoplay:isTouch});
            BV.init();
            showVideo();

            BV.getPlayer().addEvent('loadeddata', function() {
                onVideoLoaded();
            });

            // adjust image positioning so it lines up with video
            $bigImage
                .css('position','relative')
                .imagesLoaded(adjustImagePositioning);
            // and on window resize
            $window.on('resize', adjustImagePositioning);
        }

        // Next button click goes to next div
        $('#next-btn').on('click', function(e) {
            e.preventDefault();

            if (!isTransitioning) {
                next();
            }
        });

        function showVideo() {
            BV.show($('#screen-'+screenIndex).attr('data-video'),{ambient:true});
        }

        function next() {


            isTransitioning = true;

            // update video index, reset image opacity if starting over
            if (screenIndex === numScreens) {
                $bigImage.css('opacity',1);
                screenIndex = 1;
            } else {
                screenIndex++;
            }

            if (!isTouch) {
                $('#big-video-wrap').transit({'left':'-100%'},transitionDur)
            }

            (Modernizr.csstransitions)?
                $('.wrapper').transit(
                    {'left':'-'+(100*(screenIndex-1))+'%'},
                    transitionDur,
                    onTransitionComplete):
                onTransitionComplete();



        }

        function onVideoLoaded() {
            $('#screen-'+screenIndex).find('.big-image').transit({'opacity':0},500)
        }

        function onTransitionComplete() {
            isTransitioning = false;
            if (!isTouch) {
                $('#big-video-wrap').css('left',0);
                showVideo();
            }
        }

        function adjustImagePositioning() {
            $bigImage.each(function(){
                var $img = $(this),
                    img = new Image();

                img.src = $img.attr('src');

                var windowWidth = $window.width(),
                    windowHeight = $window.height(),
                    r_w = windowHeight / windowWidth,
                    i_w = img.width,
                    i_h = img.height,
                    r_i = i_h / i_w,
                    new_w, new_h, new_left, new_top;

                if( r_w > r_i ) {
                    new_h   = windowHeight;
                    new_w   = windowHeight / r_i;
                }
                else {
                    new_h   = windowWidth * r_i;
                    new_w   = windowWidth;
                }

                $img.css({
                    width   : new_w,
                    height  : new_h,
                    left    : ( windowWidth - new_w ) / 2,
                    top     : ( windowHeight - new_h ) / 2
                })

            });

        }
    });

---

Hmm转换在加载1到2张幻灯片后工作正常。第二次加载时工作正常，是的。第一次从幻灯片1单击到幻灯片2时，没有转换。您是否知道为上一个按钮创建功能所需的javascript？您应该添加一个按钮和一个函数，而不是减去100，必须加上100。试着去做，后来我帮你把我试过的代码添加到我原来的帖子里。问题是，当我单击“上一步”时，h1视频标题没有与幻灯片正确同步。

$('.wrapper').transit({'left':'-0%'},1000);

$(function() {

        // Use Modernizr to detect for touch devices, 
        // which don't support autoplay and may have less bandwidth, 
        // so just give them the poster images instead
        var screenIndex = 1,
            numScreens = $('.screen').length,
            isTransitioning = false,
            transitionDur = 1000,
            BV,
            videoPlayer,
            isTouch = Modernizr.touch,
            $bigImage = $('.big-image'),
            $window = $(window);

         //Add------------------------------
         $('.wrapper').transit(
                    {'left':'-0%'},
                    1000);
        //------------------------------------

        if (!isTouch) {
            // initialize BigVideo
            BV = new $.BigVideo({forceAutoplay:isTouch});
            BV.init();
            showVideo();

            BV.getPlayer().addEvent('loadeddata', function() {
                onVideoLoaded();
            });

            // adjust image positioning so it lines up with video
            $bigImage
                .css('position','relative')
                .imagesLoaded(adjustImagePositioning);
            // and on window resize
            $window.on('resize', adjustImagePositioning);
        }

        // Next button click goes to next div
        $('#next-btn').on('click', function(e) {
            e.preventDefault();

            if (!isTransitioning) {
                next();
            }
        });

        function showVideo() {
            BV.show($('#screen-'+screenIndex).attr('data-video'),{ambient:true});
        }

        function next() {


            isTransitioning = true;

            // update video index, reset image opacity if starting over
            if (screenIndex === numScreens) {
                $bigImage.css('opacity',1);
                screenIndex = 1;
            } else {
                screenIndex++;
            }

            if (!isTouch) {
                $('#big-video-wrap').transit({'left':'-100%'},transitionDur)
            }

            (Modernizr.csstransitions)?
                $('.wrapper').transit(
                    {'left':'-'+(100*(screenIndex-1))+'%'},
                    transitionDur,
                    onTransitionComplete):
                onTransitionComplete();



        }

        function onVideoLoaded() {
            $('#screen-'+screenIndex).find('.big-image').transit({'opacity':0},500)
        }

        function onTransitionComplete() {
            isTransitioning = false;
            if (!isTouch) {
                $('#big-video-wrap').css('left',0);
                showVideo();
            }
        }

        function adjustImagePositioning() {
            $bigImage.each(function(){
                var $img = $(this),
                    img = new Image();

                img.src = $img.attr('src');

                var windowWidth = $window.width(),
                    windowHeight = $window.height(),
                    r_w = windowHeight / windowWidth,
                    i_w = img.width,
                    i_h = img.height,
                    r_i = i_h / i_w,
                    new_w, new_h, new_left, new_top;

                if( r_w > r_i ) {
                    new_h   = windowHeight;
                    new_w   = windowHeight / r_i;
                }
                else {
                    new_h   = windowWidth * r_i;
                    new_w   = windowWidth;
                }

                $img.css({
                    width   : new_w,
                    height  : new_h,
                    left    : ( windowWidth - new_w ) / 2,
                    top     : ( windowHeight - new_h ) / 2
                })

            });

        }
    });