Question

我正在用jssor开发一个滑块。转换中的标题播放和播放转换效果很好，但在幻灯片转换期间，标题再次出现。我写了一个非常简单的例子，只有两个幻灯片，每个幻灯片有一个标题，只是为了显示问题。这是jsfiddle ## edit ### this jsfiddle work http://jsfiddle.net/PfV3S/ 这里是html代码：

<div id="slider1_container">
<!-- Slides Container -->
<div class="slides" u="slides">
    <div>
        <div class="caption" data-u="caption" data-t="LOGO" style="width: 470px; height: 220px; top: 130px; left: 675px;">
            <img src="http://www.veryicon.com/icon/png/Business/Pretty%20Office%205/Tests.png" style="width: 256px; height: 246px; top: 0px; left: 0px;" alt="" />
        </div>
    </div>
    <div>
        <div class="caption" data-u="caption" data-t="LOGO" style="width: 470px; height: 220px; top: 130px; left: 675px;">
            <img src="http://www.veryicon.com/icon/png/Business/Pretty%20Office%205/Tests.png" alt="" />
        </div>
    </div>
</div>

这里是js代码：

                  var _CaptionTransitions = [];
              _CaptionTransitions["LOGO"] = {
                  $Duration: 1800,
                  $Zoom: 1,
                  $FlyDirection: 9,
                  $Easing: {
                      $Left: $JssorEasing$.$EaseInJump,
                      $Top: $JssorEasing$.$EaseInJump,
                      $Zoom: $JssorEasing$.$EaseOutQuad
                  },
                  $ScaleHorizontal: 0.3,
                  $ScaleVertical: 0.3,
                  $During: {
                      $Left: [0, 0.8],
                      $Top: [0, 0.8]
                  },
                  $Round: {
                      $Left: 0.8,
                      $Top: 2.5
                  }
              };

              var options = {
                  $AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
                  $DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0),

                  $CaptionSliderOptions: { //[Optional] Options which specifies how to animate caption
                      $Class: $JssorCaptionSlider$, //[Required] Class to create instance to animate caption
                      $CaptionTransitions: _CaptionTransitions, //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
                      $PlayInMode: 1, //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
                      $PlayOutMode: 3 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
                  }
              };

              var jssor_slider1 = new $JssorSlider$("slider1_container", options);

这里是css代码：

#slider1_container {
  position: relative; 
  margin: 0 auto; 
  float: left; 
  top: 0px; 
  left: 0px; 
  width: 1600px;
  height: 600px; 
  overflow: hidden; 
}

.slides {
  cursor: move;
  position: absolute; 
  left: 0px; 
  top: 0px; 
  width: 1600px; 
  height: 600px;
  overflow: hidden;
}

.caption {
  position:absolute;
  width:500px;
  font-size:36px;
  color:#fff;
  line-height:40px;
}

div.caption > img {
  position:absolute;
  width: 256px; 
  height: 246px; 
  top: 0px; 
  left: 0px;
}

我真的没有发现任何错误。

Answer 1

感谢您的提问！我发现这是一个错误，我刚刚修好了。请下载最新版本。

顺便说一句，最好使用class为外部容器指定css。

<div id="slider1_container" class="slider1_container">

JSSOR - 幻灯片转换期间奇怪的标题行为

1 个答案: