Jssor幻灯片转换

时间:2014-09-08 18:37:31

标签: jquery slideshow jssor

我在我的页面上使用Jquery进行了Jssor幻灯片放映,它使用箭头键,单击和拖动以及自动滑动间隔,但我无法使转换工作。当我尝试包含slideshow-transition-builder-controller.min.js时,它主要打破了幻灯片。这是我目前的代码。我只想要基本的淡入淡出过渡。

<script> jQuery(document).ready(function ($) { var _SlideshowTransitions = [ { $Duration:700, $Opacity:2, $Brother:{ $Duration:1000, $Opacity:2 } } ]; var options = { $AutoPlay: true, $AutoPlaySteps: 1, $AutoPlayInterval: 6000, $PauseOnHover: 1, $ArrowKeyNavigation: true, $SlideDuration: 300, $MinDragOffsetToSlide: 20, $PlayOrientation: 1, $DragOrientation: 1 }; var jssor_slider1 = new $JssorSlider$('slider1_container', options); }); </script>

提前感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

请添加$ SlideshowOptions

<script>
    jQuery(document).ready(function ($) {
        var _SlideshowTransitions = [
            {
                $Duration:700,
                $Opacity:2,
                $Brother:{
                    $Duration:1000,
                    $Opacity:2
                }
            }
        ];
        var options = { 
            $AutoPlay: true,
            $AutoPlaySteps: 1,
            $AutoPlayInterval: 6000,
            $PauseOnHover: 1, 
            $ArrowKeyNavigation: true,
            $SlideDuration: 300,
            $MinDragOffsetToSlide: 20,
            $PlayOrientation: 1,
            $DragOrientation: 1,
            $SlideshowOptions: {                                //[Optional] Options to specify and enable slideshow or not
                $Class: $JssorSlideshowRunner$,                 //[Required] Class to create instance of slideshow
                $Transitions: _SlideshowTransitions,            //[Required] An array of slideshow transitions to play slideshow
                $TransitionsOrder: 1,                           //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
                $ShowLink: true                                    //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
            }
        };
        var jssor_slider1 = new $JssorSlider$('slider1_container', options);
    });
</script>

参考:http://www.jssor.com/development/slider-with-slideshow-jquery.html