Jssor滑块过渡

本教程将介绍Jssor滑块过渡的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

Jssor滑块过渡 教程 第1张

问题描述

我正在尝试在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>

推荐答案

我设法找到了一个工作示例并找到了正确的格式:

<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>

好了关于Jssor滑块过渡的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。