JSSOR 转换在自动播放时不起作用

Question

您好，我在启用自动播放时遇到了问题。在自动播放期间，不会切换任何过渡，只是简单地交换图像 - 第一个消失，第二个出现。我尝试更改代码以及 CSS，但它没有用。我想要的只是简单的淡入淡出过渡。

       var jssor_1_SlideshowTransitions = [{
                $Duration: 300,
                x: 0.3,
                $During: {
                    $Left: [0.3, 0.7]
                },
                $Easing: {
                    $Left: $Jease$.$InCubic,
                    $Opacity: $Jease$.$Linear
                },
                $Opacity: 2
            }
        ];

        var jssor_1_options = {
            $AutoPlay: 1,
            $FillMode: 5,
            $SlideshowOptions: {
                $Class: $JssorSlideshowRunner$,
                $Transitions: jssor_1_SlideshowTransitions,
                $TransitionsOrder: 1
            },
            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$
            },
            $ThumbnailNavigatorOptions: {
                $Class: $JssorThumbnailNavigator$,
                $SpacingX: 5,
                $SpacingY: 5
            },
            $SlideDuration: 200,
            $Idle: 5000
        };

        jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
        jssor_1_slider.$HWA = false;

警告 - 我正在使用 Ajax 加载图像 - 加载它们后我会触发

jssor_1_slider.$ReloadSlides(imageList);

这会是个问题吗？

Answer 1

我查看了您的页面，您使用 id 为 slides 元素指定了 css 规则。

在jssor slider初始化的时候，会使用dom层级，克隆一些节点，这样，id的一些元素会丢失。

请始终使用 class 名称为 jssor 滑块内的元素指定 css 规则。

<style>
    .imageList {
        cursor: default;
        position: relative;
        top: 0px;
        left: 0px;
        width: 980px;
        height: 380px;
        overflow: hidden;
    }
</style>

<div data-u="slides" class="imageList" id="imageList">

JSSOR 转换在自动播放时不起作用

JSSOR transition is not working while autoplay

transition

jssor