Question

我有一个淡化图像的滑块。

转换有效，新图像会消失，但之前的图像不会淡出。

在下一张图像完全淡入后，上一张图像就会消失。

对于不透明图像，这当然非常精细，因为我们不需要先前的图像淡出。它只是被新图像覆盖。

问题是我的图像有透明区域，因此前一图像必须淡出。

我怎么能实现这个目标？

我目前的代码是：

   jssor_1_slider_init = function() {

        var jssor_1_SlideshowTransitions = [
          {$Duration:800,$Opacity:2}
        ];

        var jssor_1_options = {
          $AutoPlay: 1,
          $LazyLoading: 1,
          $SlideshowOptions: {
            $Class: $JssorSlideshowRunner$,
            $Transitions: jssor_1_SlideshowTransitions
          }
        };

        var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

        /*#region responsive code begin*/

        var MAX_WIDTH = 256;

        function ScaleSlider() {
            var containerElement = jssor_1_slider.$Elmt.parentNode;
            var containerWidth = containerElement.clientWidth;

            if (containerWidth) {

                var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);

                jssor_1_slider.$ScaleWidth(expectedWidth);
            }
            else {
                window.setTimeout(ScaleSlider, 30);
            }
        }

Answer 1

给定带有透明区域的图像，要使用幻灯片显示jssor滑块，可以使用双胞胎过渡。

打开选项窗口，选择一个或多个双胞胎幻灯片过渡。

Answer 2

关注this page上的文档和示例我认为你需要这个{$Duration:700,$Opacity:2,$Brother:{$Duration:700,$Opacity:2}}

示例：淡化双胞胎

使滑块图像淡出

2 个答案: