JSSOR - 幻燈片轉換期間的奇怪字幕行爲

我正在開發帶有jssor的滑塊。轉換中的字幕播放和播放過渡效果很好，但在幻燈片轉換過程中，字幕再次出現。我寫了一個非常簡單的例子，只有兩張幻燈片和一個標題，每個只顯示問題。這裏是的jsfiddle ##編輯###本的jsfiddle工作http://jsfiddle.net/PfV3S/ 這裏html代碼：JSSOR - 幻燈片轉換期間的奇怪字幕行爲

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

我真的沒有發現任何錯誤。

來源

2014-07-08 Appost

感謝您的問題！我發現這是一個錯誤，我剛剛修復它。請下載最新版本。

順便說一下，最好使用class來指定'外部容器'的css。

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

來源

2014-07-09 00:15:38 jssor

JSSOR - 幻燈片轉換期間的奇怪字幕行爲

回答

相關問題