2014-01-17 95 views
4

我想在我的Jssor滑块上实现转换效果,但我不确定放置选项的位置。Jssor滑块转换

该网站有我使用的转换代码生成器,但无论我在哪里放置代码,滑块都不使用转换。

这是我目前的尝试:

<script type="text/javascript"> 
     jQuery(document).ready(function ($) { 
      var options = 
      { 
       $DragOrientation: 3, 
       $AutoPlay: true, 
       $SlideDuration: 1500, 
       $AutoPlayInterval: 4500, 
       $SlideshowOptions: { 
        $Transitions: { $Duration: 600, $Delay: 50, $Cols: 8, $Rows: 4, $FlyDirection: 5, $Formation: $JssorSlideshowFormations$.$FormationZigZag, $Assembly: 1028, $ChessMode: { $Column: 3, $Row: 12 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseOutQuad }, $Opacity: 2 } 
       } 
      } 
      var jssor_slider1 = new $JssorSlider$('banner_slider', options); 
     }); 
    </script> 

回答

8

我设法找到工作的例子,发现正确的格式:

<script type="text/javascript"> 
    jQuery(document).ready(function ($) { 
     var _SlideshowTransitions = [{ 
      $Duration: 600, 
      $Delay: 50, 
      $Cols: 8, 
      $Rows: 4, 
      $FlyDirection: 5, 
      $Formation: 
      $JssorSlideshowFormations$.$FormationZigZag, 
      $Assembly: 1028, 
      $ChessMode: { $Column: 3, $Row: 12 }, 
      $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseOutQuad }, 
      $Opacity: 2 
     }]; 
     var options = { 
      $DragOrientation: 3, 
      $AutoPlay: true, 
      $SlideDuration: 1500, 
      $AutoPlayInterval: 4500, 
      $SlideshowOptions: {        //Options which specifies enable slideshow or not 
       $Class: $JssorSlideshowRunner$,     //Class to create instance of slideshow 
       $Transitions: _SlideshowTransitions,   //Transitions to play slide, see jssor slideshow transition builder 
       $TransitionsOrder: 1,       //The way to choose transition to play slide, 1 Sequence, 0 Random 
       $ShowLink: 2,         //0 After Slideshow, 2 Always 
       $ContentMode: false        //Whether to trait content as slide, otherwise trait an image as slide 
      } 
     }; 
     var jssor_slider1 = new $JssorSlider$("banner_slider", options); 
    }); 
</script>