transition - 自动播放时 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名称为jss或 slider 内的元素指定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">