Question

我试图使用Jquery cycle plugin实现图像/视频（缩略图）滑动。如果用户点击视频缩略图，我将用html 5 <video>标签替换缩略图。所以用户可以观看视频。视频完成后，单击“下一步”将替换视频标记与之前的图像。现在问题来了。循环插件未应用于此图像。

我的js：

    $('.slides_container').cycle({ 
        fx:     'fade', 
        speed:  'slow', 
        timeout: 0, 
        slideResize: 0 ,
        containerResize: 0,
        after: function(curr, next, opts) {          
            callGalleryDetails($(next).attr('id'));
            $('.number').html(opts.currSlide + 1  +"/"+opts.slideCount) ;
        },
        before:function(curr,next,opts){
             console.log(opts.nextSlide + 1);
             var index= opts.nextSlide + 1;
//********************************************************************************
             //replacing video with image from hidden field
             if($(".video video").length) { 
                 var classes = $(".video video").parent().attr('class').split(' ');
                 $('.is_video.'+classes[1]+'').val(1);
                 $('.video.'+classes[1]+'').html($('.video_hidden.'+classes[1]+'').html());
                 $('.video.'+classes[1]+'').children('img').css('display','none');
                 $('.video.'+classes[1]+'').children('img').css('opacity','0');
             }

//**********************************************************************************
             var $slide = $(next);
             var w = $slide.outerWidth();
             var h = $slide.outerHeight();
             $slide.css({
            marginTop: ($('.graphics_container').height() - h) / 2,
            marginLeft: ($('.graphics_container').width()- w) / 2,
             });
        },

        next:   '.slides-right', 
        prev:   '.slides-left' ,
        center : 1,
        fit: 1  ,
        startingSlide: $('#starting_index').val(),
        slideExpr: 'img'
    });

我能够成功完成图像/视频的重复播放。但是如何再次应用Cycle插件。

我试过这个demo。但我想将图像放在我已移除的相同位置。

Answer 1

我得到了解决方案。不要删除图像并再次替换，只需将视频放在图像上方即可。点击下一步后，只需隐藏视频即可。

显示视频：

 $('.video').on('click',function(e){
         if($(".video img").length) { 

         var classes = $(this).attr('class').split(' ');
                $('.is_video.'+classes[1]+'').val(1);
                $('.video_src.'+classes[1]+'').find('video').css('display','block');
                $('.video_src_1.'+classes[1]+'').attr('autoplay','autoplay');
                var $video = $('.video_src_1.'+classes[1]+'');
                $video[0].currentTime = 0;
                $video[0].play();
                var w = $video.outerWidth();
                var h = $video.outerHeight();
                $video.css({
                    marginTop: ($('.graphics_container').height() - h) / 2,
                    marginLeft: ($('.graphics_container').width()- w) / 2,
                });
         }
     }) ;

在循环功能之前：

 before:function(curr,next,opts){
            $('.video_src').find('video').css('display','none');
            $('.video_src_1').attr('autoplay','false');
            var $vidoe = $('.video_src_1');
            $vidoe[0].pause();

            var $slide = $(next);
            var w = $slide.outerWidth();
            var h = $slide.outerHeight();
            $slide.css({
                marginTop: ($('.graphics_container').height() - h) / 2,
                marginLeft: ($('.graphics_container').width()- w) / 2,
            });
         },

Jquery循环插件 - 将删除的图像添加到循环中（图像和视频幻灯片）

1 个答案: