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滑块初始化时，它将诉诸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转换不起作用

1 个答案: