2

jssorでスライダーを開発しています。トランジションのキャプションの再生とトランジションの再生はうまく機能しますが、スライドのトランジション中にキャプションが再び表示されます。問題を示すためだけに、それぞれ 1 つのキャプションを持つ 2 つのスライドのみの非常に単純な例を作成しました。これが 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