2

我正在用 jssor 开发一个滑块。字幕播放过渡和播放过渡效果很好，但在幻灯片过渡期间，标题再次出现。我写了一个非常简单的例子，只有两张幻灯片，每张都有一个标题，只是为了说明问题。这是 jsfiddle ##edit### 这个 jsfiddle 工作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;
}

我真的不觉得有什么不对。

4

1 回答 1

1

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

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

<div id="slider1_container" class="slider1_container">
于 2014-07-09T00:15:38.970 回答